Question

我在点击事件上显示和隐藏div，我想从一个按钮做到这一点。我写了一段代码，但它没有用。

<head>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript">
      $(function () {
         $('#clickme').click(function () {

            $('.mydiv').hide();
         })

         $('.clickme').click(function () {

            $('.mydiv').show();
         })
      })
   </script>
</head>
<body>
   <div class="mydiv">hiiiii</div>
   <input type="button" id="clickme" value="clickme" />
</body>

Answer 1

试试这个：

$('#clickme').click(function() {   // you're using an ID here!
    var div = $('.mydiv');

    if(div.is(":visible")) {
        div.hide();
    } else {
        div.show();
    }

});

您正在为按钮添加两个事件侦听器。两者都将在点击时运行，因此div将显示并立即隐藏。

Answer 2

试试这个：

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">


$(function(){

$('#clickme').click(function(){

    if ($('.mydiv').is(":visible")) {
        $('.mydiv').hide();
    }
    else {
        $('.mydiv').show();
    }
}
)
})


</script>


</head>

<body>

<div class="mydiv">hiiiii </div>
<input type="button" id="clickme" value="clickme" />
</body>

Answer 3

您正在jQuery中混合class和id标识符。您的按钮具有ID clickme。在您隐藏内容的第一个代码中，您正在以适当的方式引用一个按钮，但在第二个脚本中，您使用的是.clickme而不是#clickme。

虽然正确，但这个脚本会同时隐藏和显示，因此它看起来好像什么也没发生：

$(function(){ 
   $('#clickme').click(function(){ 
       $('.mydiv').hide(); 
   });

   $('#clickme').click(function(){ 
       $('.mydiv').show(); 
   }); 
});

更好的方法是使用：

$(function() {
    $("#clickme").click(function() {
        $(".mydiv").toggle();
    });
});

正如Binarous指出的那样，第一个脚本虽然正确但不起作用。隐藏时应该应用一些自定义类，并在显示时使用该类，甚至更好地使用toggle（）函数。

Answer 4

当你隐藏它时，在div中添加一个类，在显示它时删除它，并在你想要做某事之前检查它。

此代码有效：

$(function(){
    $('#clickme').click(function(){

        if ($('.mydiv').hasClass("hidden")) $('.mydiv').removeClass("hidden").show();
        else $('.mydiv').addClass("hidden").hide();
    });
})

这是一个有效的jsFiddle：http://jsfiddle.net/V3gRH/

Answer 5

<强> HTML

<div id="divContent">Some content</div>
<input type="button" id="btnShow" value="Hide" />

<强>脚本

$(function(){
    var isVisible=true;
    $("#btnShow").click(function(){
         if(isVisible)
         {
              $(this).val("Show")
              $("#divContent").hide();
         }
        else
        {
             $(this).val("Hide")
             $("#divContent").show();
        }
        isVisible=!isVisible;   
    });    
});

以下是工作示例：http://jsfiddle.net/95vXQ/5/

编辑：

isVisible = !isVisible

以上行是以下代码的简化版

if(isVisible)
{
  isVisible =false;
}
else
{
 isVisible =true;
}

Answer 6

$(function(){
    $("#clickme").click(function(){
      var $mydiv = $(".mydiv");
        if ($mydiv.css("display")=="none"){
           $mydiv.show();   
        } else
        {
           $mydiv.hide();
        }
    });        
});

-- SEE DEMO --

Answer 7

试试这个：

$(function() {
    $('#clickme').click(function() {
        if ($('.mydiv').css('display') == "none") {
            $('.mydiv').show();
        } else {
            $('.mydiv').hide();
        }
    });
});

Answer 8

你可以制作一个隐藏的复选框点击按钮后，它将被检查为真。然后检查如果再次单击该按钮，它将检查是否已选中（如果已选中 - 取消选中）.. 那么你可以添加另一个IF ..按钮点击，选中IF复选框被选中，如果是显示，否则隐藏..

OMG chikidi检查自己

$（'＃check'）。is（：checked）{...} $（'＃check'）。not（：checked）{...}

这很愚蠢，但我可能会工作！ ; d

在jquery中隐藏和显示

8 个答案: