Question

<div class="row">
  <div class="large-24 columns row2 darkgreybg" id="ricontainer">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</div>

  $(function() {
    $("#ributton").click(function () {
        // Hide it but only if not hidden - hide
        $('#ricontainer:visible').hide();

        // Later in the script - Show it but only If it's not visible.  
        $('#ricontainer:hidden').show();
    });
  });

不知道为什么这不起作用，有什么想法吗？我只是想要它，以便我有一个容器，如果可见，当点击一个按钮时它将隐藏它。或者，如果它已被隐藏，单击该按钮将显示它。

提前致谢。

Answer 1

您可以改为使用.toggle()：

  $(function() {
    $("#ributton").click(function () {
        $('#ricontainer').toggle(); // toggles between show/hide
    });
  });

Answer 2

按照Jai的建议，你可以使用.toggle（），但我总是发现泪流满面。

$(function() {
    $("#ributton").click(function () {

        if($('#ricontainer').is(':visible'))
        {
           // Hide it but only if not hidden - hide
           $('#ricontainer').hide();
        }
        else
        {
           $('#ricontainer').show();
        }
    });
  });

你也应该使用＆＃34; on＆＃34;而不是＆＃34;点击＆＃34;我相信这是jQuery版本1.7的推荐方法：

$('#ributton').on('click', function(){});

Answer 3

您的代码将始终显示按钮，原因如下：

最初隐藏的按钮：

$('#ricontainer:visible').hide(); // nothing happens, button not selected
                                  // because the selector matches nothing

$('#ricontainer:hidden').show();  // hidden button found and shown, all good

按钮初始显示：

$('#ricontainer:visible').hide(); // selector matched, button found
                                  // now hiding the button

$('#ricontainer:hidden').show();  // button hidden from the previous line is found
                                  // so the selector matched and is now showing the button
                                  // and that's the PROBLEM

其他答案已经提出了如何修复它的方法，这只是告诉你为什么它不能按预期工作。因此，要么在开始时获取按钮的状态，要么使用if / else来更改其状态，或者只是切换它。

Answer 4

您可以使用JavaScript执行此操作：

...
<div class="large-24 columns row2 darkgreybg" id="ricontainer" onclick="controlButton()">
...

function controlButton() {
      var div = document.getElementById("ricontainer");
      if (div.style.display === "none") {
         div.style.display = "block";
      } else {
         div.style.display = "none";
      }
}

Jquery显示/隐藏按钮不起作用

4 个答案: