0

我想在点击事件上显示和隐藏 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>
4

8 回答 8

3

试试这个：

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

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

});

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

于 2012-04-25T12:39:25.287 回答
3

试试这个：

<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>
于 2012-04-25T12:40:45.333 回答
3

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

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

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

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

更好的方法是使用：

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

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

于 2012-04-25T12:42:10.927 回答
2

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

此代码有效：

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

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

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

于 2012-04-25T12:44:17.067 回答
1

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;
}
于 2012-04-25T12:45:30.197 回答
1 
$(function(){
    $("#clickme").click(function(){
      var $mydiv = $(".mydiv");
        if ($mydiv.css("display")=="none"){
           $mydiv.show();   
        } else
        {
           $mydiv.hide();
        }
    });        
});​

-- 看演示 --

于 2012-04-25T12:50:17.350 回答
0

试试这个：

$(function() {
    $('#clickme').click(function() {
        if ($('.mydiv').css('display') == "none") {
            $('.mydiv').show();
        } else {
            $('.mydiv').hide();
        }
    });
});
于 2012-04-25T12:49:10.227 回答
0

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

OMG chikidi 检查自己

$('#check').is(:checked) {...} $('#check').not(:checked) {...}

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

于 2012-04-25T12:49:41.033 回答