Mobil görünümde her seferinde bir div geçişi

Question

Sadece mobil cihazlarda akordeon menüsü olarak görünen bir altbilgi var. Bu nedenle, ul öğeleri yalnızca mobil aygıtlarda yük altında gizlenmiş olmalıdır. Bölümlerden yalnızca bir kerede açılmalı ve eğer açık bir tane varsa, başka bir tetiklendiğinde kapanacaktır (bu gibi: http://jsfiddle.net/auUxk/). Aşağıdaki kodum var, ancak şu anda global olarak divleri tetikliyor.

<div class="col-md-3 col-sm-4"> 
    <div class="panel"> 
     <div class="panel-heading"> 
      <h4 class="panel-title">About us</h4> 
     </div> 
     <ul> 
      <li><a href="">Link</a> 
      </li> 
      <li><a href="">Link</a> 
      </li> 
      <li><a href="">Link</a> 
      </li> 
      <li><a href="">Link</a> 
      </li> 
      <li><a href="">Link</a> 
      </li> 
     </ul> 
    </div> 
</div> 
<div class="col-md-3 col-sm-4"> 
    <div class="panel"> 
     <div class="panel-heading"> 
      <h4 class="panel-title">Header</h4> 
     </div> 
     <ul> 
      <li><a href="">Link</a> 
      </li> 
      <li><a href="">Link</a> 
      </li> 
      <li><a href="">Link</a> 
      </li> 
      <li><a href="">Link</a> 
      </li> 
     </ul> 
    </div> 
</div> 

medya sorgusu

@media screen and (max-device-width: 480px) { 
    ul li{ 
    display:none; 
    } 
} 

jQuery

$(document).ready(function($) { 
    $(".panel-title").click(function() { 
     $("li").slideToggle(500); 
    }); 
}); 

JSFIDDLE: http://jsfiddle.net/auUxk/1115/

Answer 1

W Sadece css kullanmıyor musunuz? Aynı isimle radyo düğmeleri ile çalışacaktır.

JSFIDDLE: http://jsfiddle.net/0Ldpk0vy

Güncelleme (animasyon ile) JSFIDDLE: Çünkü bu http://jsfiddle.net/0Ldpk0vy/1/

ul { 
    display: none; 
} 

[type="radio"] { 
    display: none; 
} 

[type="radio"]:checked + ul { 
    display: block; 
}