katlanabilir eleman tıklanırsa, tüm diğer (katlanabilir) zaten açılmış elemanlar daraltmak -

Question

Önyükleme benim kişisel web sitesinde şu anda çalışıyorum ve aşağıdaki sorunu var: Ben kullanmak istiyorum benim web sitesinde

varsayılan Bootstrap Akordeon gibi davranması gereken bir katlanabilir "ana menü". Ana navigasyon menümüz, daraltılabilen sıralanmamış bir listedir. Her <li> öğesinin tümü data-toggle="collapse" özniteliğine ve iç içe geçirilmiş daraltma sınıfına sahiptir. Bu iyi çalışıyor.

Sorun, başka bir menü noktası açıldığında menü noktalarının kapanmamasıdır. Tasarım gerekçeleri ve ihtiyacım olan diğer bazı özellikler için sahip olduğum HTML yapısı nedeniyle Bootstrap varsayılan Akordeon özelliğini kullanamıyorum.

Web sitesinde başka bir bölümde zaten Akordeon özelliğini zaten kullanıyorum. eserlerin yukarıdan

<div id="cases-list-elements-group" class="**panel-group**"> 

    <li class="**panel** li-main-style ul-style"> 

    <a class="nav-scroll list-case-style" href="#case-details-1" 
    data-toggle="collapse" **data-parent="#cases-list-elements-group"**> 
    Case 1 Details </a> 

     <div id="case-details-1" class="collapse case-details"> 
     <div class="container container-cases"> 

örnek: Orada bu (benim web sayfasında bu özel bölümünden örnek kod) benziyor Bootstrap Akordeon için gerekli HTML yapıya sahip olabilir. Öyleyse Bootstrap'ten varsayılan Akordeon'u nasıl kullanacağımı biliyorum.

• panel grubu
  paneli
  veri-veli = "# id-of-the-panel grubu: Benim sorunum önce açıklandığı gibi, benim ana menü için bu HTML yapısını olamaz, olduğu "

Başka bir şey genişletildikten sonra, zaten açılmış olan menü noktasını kapatmak için bir geçici çözümüm olması gerekir. Saatlerce araştırdım ve önceden açılmış olan öğeyi kapatması gereken bazı JavaScript (jQuery) örnekleri buldum. Maalesef bulduğum örneklerden hiçbiri sorunumu çözmeme yardımcı oldu. Benim için mantığın anlaşılması için yeterince detaylı değildi ya da hiç işe yaramadı (evet, sağlanan JS Fiddle örneklerinde de işe yaramadı)

Bazı özel JavaScript'lerle bunu yapmam gerektiğini biliyorum . Çalıştığım saatler geçtikten sonra, muhtemelen burada birileri tavsiye edebilir.

Answer 1

Cevap aradığınızı ve bazı jQuery örneklerini bulduğunuzu biliyorum, ancak bu yolu denediniz mi?

Temel olarak yaptığım her liste öğesinde yalnızca bir liste gizleniyor. Akordeon listesi öğeleri bağlantılarını da yapmayı düşünüyorsanız, etraflarında bir href etiketi ekleyin. Bu kod kısaltılabilir eminim ama burada bunun jQuery yarısı:

$('#first').hide(); 
$('#second').hide(); 
$('#third').hide(); 
$('#fourth').hide(); 

$('#colours').click(function(){ 
    $('#first').slideToggle(); 
    $('#second:visible').toggle(); 
    $('#third:visible').toggle(); 
    $('#fourth:visible').toggle(); 
}) 

$('#shapes').click(function(){ 
    $('#second').slideToggle(); 
    $('#first:visible').toggle(); 
    $('#third:visible').toggle(); 
    $('#fourth:visible').toggle(); 
}) 

$('#fruit').click(function(){ 
    $('#third').slideToggle(); 
    $('#first:visible').toggle(); 
    $('#second:visible').toggle(); 
    $('#fourth:visible').toggle(); 
}) 

$('#vehicles').click(function(){ 
    $('#fourth').slideToggle(); 
    $('#first:visible').toggle(); 
    $('#second:visible').toggle(); 
    $('#third:visible').toggle(); 
}) 

Ve burada tam şey JSFIDDLE

var