-3

我有一个简单的问题，但不知道如何实现这一点。我所知道的是我必须使用该click()功能。

基本上，我有一个 id 的 div #box1。我应用了 CSS 样式overflow:auto，以便在表格长度（#box1 内的长表格）超过 div 的宽度时会有一个垂直滚动条#box1。

现在我想在 div 下方添加一个链接。该链接应执行以下操作：

  • 单击时，将 div 的 CSS#box1添加overflow:auto到overflow:visible
  • 同时，虽然它更改了上面的 CSS，但链接应该更改为显示一个新链接（旧链接消失），overflow:auto当单击该链接时，该链接将更改回 CSS。
4

4 回答 4

2

你可以使用css方法。

$('#myButton').click(function(event) {
    event.preventDefault();
    $('#box1').css('overflow', function(i, o) {
        return o == 'auto' ? 'visible' : 'auto';
    })
});

而不是隐藏/显示 2 个不同的按钮，您可以使用text方法：

$('#myButton').click(function(event) {
    // ...  
    $(this).text(function(i, text){
       return text == 'show' ? 'hide' : 'show';
    })
});

http://jsfiddle.net/u6Nc8/

于 2013-02-17T18:13:35.627 回答
0

小提琴：http: //jsfiddle.net/wbjSX/

$('#theLink').click(function() {
    if (turnToVisible) {
        $('#box1').css('overflow', 'visible');
        turnToVisible = false;
        $('#theLink').text('foobar');
    }
    else {
        $('#box1').css('overflow', 'auto');
        turnToVisible = true;
        $('#theLink').text('foobarbaz');
    }
});

这样的事情应该让你开始。

它基本上将您想要的 div 存储在一个变量turnToVisible中。您可以使用该text功能来更改链接的文本，并使用该css功能来更改 CSS。

于 2013-02-17T18:13:12.330 回答
0

好的，您需要打开文本：

<a id="myDivLink" href="javascript:void(0);">Disable scrolling</a>
<script type="text/javascript">
$(document).ready(function(){
  $("#myDivLink").click(function(){
    var anchor = $(this);
    if(anchor.html()==="Disable scrolling") {
      $("#myDiv").css("overflow","visible");
      anchor.html("Enable scrolling");
    } else {
      $("#myDiv").css("overflow","auto");
      anchor.html("Disable scrolling");
    }
  });
});
</script>

怎么样？

于 2013-02-17T18:15:41.437 回答
0

HTML：

<div id="#box1"></div>
<a href="#" id="#toggle">Toggle</a>

JS：

(function($){
    $(document).ready(function(){
        $("#toggle").click(function(e){
            e.preventDefault();
            if($("#box1").css("overflow") === "auto"){
                $("#box1").css("overflow", "visible");
            }else{
                $("#box1").css("overflow", "auto");
            }
        });
    });
}(window.jQuery));

基本上，您需要阻止链接加载另一个页面e.preventDefault()。然后，如果框有overflow: auto，请将其设置为overflow: visible，反之亦然。

于 2013-02-17T18:18:52.580 回答