Javascript 切换div显示样式无效

我希望当第一次加载我的页面时，

将处于活动状态，但我单击切换按钮，然后

class=“col-md-9 column”id=“c9”

将隐藏并

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

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

您正在使用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>


$（“#菜单切换”）。单击（函数（）{
$（“面积切换”）。切换（“慢”）；
$（“#侧边栏”）。切换（“慢速”）；
如果（$（'#c12'）。是（':visible'））{
$（'#c12'）.hide（）；
}否则{
$（'#c12'）.show（）；
}                  
});
您基于代码的需求是一个悖论，如果我理解正确，您希望显示#c9和隐藏#c12，那么一旦单击#区域#切换，显示#c12和隐藏#c9？这是不可能的，因为c12是c9的子代，这意味着当#c9被隐藏时，#c12也被隐藏

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

<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>