Question

我希望在第一次加载我的页面时，<div class="col-md-9 column" id="c9" >将处于活动状态，然后我点击切换按钮，然后class="col-md-9 column" id="c9"进入隐藏状态 <div class="col-md-12 column" id="c12"将会显示。我的切换代码工作，但当我添加这段代码

if ($('#c9').is(':visible')) {
    $('#c12').hide();
}  
   if ($('#c9').is(':hidden')) {
    $('#c12').show();
}

然后这两个div都没有显示

<div class="col-md-3 column" id="area_toggle">

</div>

<div class="col-md-9 column" id="c9" >
    <div class="col-md-12 column" id="c12" style="display: none">

    </div>
</div>

<script>
$( "#menu-toggle" ).click(function() {
  $( "#area_toggle" ).toggle( "slow" )
  $( "#sidebar" ).toggle( "slow" );
          if ($('#c9').is(':visible')) {
            $('#c12').hide();
        }  
           if ($('#c9').is(':hidden')) {
            $('#c12').show();
        }                  

});
</script>

Answer 1

基于代码的要求是一个悖论，如果我理解正确你要显示＃c9并隐藏＃c12，那么一旦#area_toggle被点击显示＃c12并隐藏＃c9？这是不可能的，因为c12是c9的孩子，这意味着当＃c9被隐藏时，＃c12也被隐藏。

Answer 2

您可以使用toggle（）来切换两个元素的可见性，而不是使用if ... else

$("#menu-toggle").click(function () {
    $("#area_toggle").toggle("slow")
    $("#sidebar").toggle("slow");
    $('#c9, #c12').toggle();
});

Answer 3

您正在使用c9进行比较，但该元素未切换，您应该使用类似的内容：

<div class="col-md-3 column" id="area_toggle">

</div>

<div class="col-md-9 column" id="c9" >
    <div class="col-md-12 column" id="c12" style="display: none">

    </div>
</div>

<script>
$( "#menu-toggle" ).click(function() {
  $( "#area_toggle" ).toggle( "slow" );
  $( "#sidebar" ).toggle( "slow" );
          if ($('#c12').is(':visible')) {
            $('#c12').hide();
        }  else {
            $('#c12').show();
        }                  

});
</script>

切换div显示样式不起作用

3 个答案: