Переключить стиль отображения div не работает

Question

Переключить стиль отображения div не работает

0

Я хочу, чтобы при загрузке моей страницы первый раз, тогда <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>

shanto 20 фев. 2014, в 10:28

Источник

Теги:

javascript

jquery

3 ответа

Ещё вопросы

Macchiato · Answer 1 · 2014-02-20T07-43-00.000Z

Ваше требование, основанное на коде, является парадоксальным, если я правильно понимаю, что вы хотите показать # c9 и скрыть # c12, то один раз, когда #area_toggle будет нажато показать # c12 и скрыть # c9? Это невозможно, так как c12 является дочерним элементом c9, это означает, что когда # c9 скрыто, # c12 также скрыт.

Arun P Johny · Answer 2 · 2014-02-20T08-17-00.000Z

Вы можете просто использовать toggle() для переключения видимости обоих элементов вместо использования if... else

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

Goran.it · Answer 3 · 2014-02-20T07-20-00.000Z

Вы используете 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>