Я использую Twitter Bootstrap с помощью jQuery.

Согласно документации по начальной загрузке, если вы хотите, чтобы складной элемент был открыт по умолчанию, вы добавляете дополнительный класс "в", И если вы хотите, чтобы свернутый элемент был свернут по умолчанию, вы устанавливаете высоту в 0px.

Это все работает хорошо и хорошо.

Я хотел бы использовать Media Query, чтобы установить элемент открытым по умолчанию на больших экранах и свернутым по умолчанию на маленьких экранах (а затем нажмите для переключения на оба) ...

Мой HTML:

 
  
   Heading text.
   <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
    (Click to show/hide)
   </a>
  
  
   
    Lorem ipsum.
   
  
 

Мой CSS:

@media (min-width: 768px) {
    .collapse {
        height: auto;
    }
}
@media (max-width: 767px) {
    .collapse {
        height: 0px;
    }
}

Это работает нормально, пока вы не начнете нажимать на него ...

Ниже 767px элемент свернут по умолчанию, а над элементом открыт по умолчанию. Правильный.

Ниже 767px вы можете нажать, чтобы открыть элемент, и он открывается нормально. Нажмите еще раз, и он прячется. Промыть и повторить. Правильный.

Если щелкнуть по элементу выше 767 пикселей, он закрывается, а затем снова открывается. Нажмите еще раз, и на этот раз он закроется и останется закрытым. Нажмите еще раз, и он открывается нормально. Нажмите еще раз, и он нормально закрывается.

Поэтому по какой-то причине выше 767px (когда элемент открыт по умолчанию), требуется два щелчка, чтобы он остался свернутым без повторного открытия, а затем он работает нормально.

Мысли?