Schließen Sie alle anderen Untermenüs auf klicken

Question

Hallo an alle, Danke, dass Sie sich die Zeit genommen haben, diesen Beitrag zu lesen.

Ich habe das folgende Problem Ich versuche, ein Menü mit Untermenüs zu erstellen.

Menü sollte:

1. öffnen Untermenüs klicken. (funktioniert)

2. Untermenüs bleiben im ausgewählten Menü geöffnet. (in Betrieb)

   3. Nach dem Klicken in anderen Menüs sollten die vorherigen Untermenüs geschlossen werden. (Arbeiten nicht)

HTML

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <ul class="bottom-menu"> 
     <li class="drop"><a>Hyperlink 1</a></li> 
     <li class="drop"><a>Hyperlink 2</a> 
     <ul id="m1" class="bottom-menu-sub"> 
     <li><a href="#">Hyperlink Sub</a></li> 
     <li><a href="#">Hyperlink Sub</a></li> 
     <li><a href="#">Hyperlink Sub</a></li> 
     </ul> 
    </li> 
    <li class="drop"><a>Hyperlink 3</a> 
     <ul id="m2"> 
     <li><a href="#">Hyperlink Sub</a></li> 
     <li><a href="#">Hyperlink Sub</a></li> 
     </ul> 
    </li> 
    <li class="drop"><a>Hyperlink 4</a> 
     <ul id="m3"> 
     <li><a href="#">Hyperlink Sub</a></li> 
     <li><a href="#">Hyperlink Sub</a></li> 
     </ul> 
    </li> 
</ul> 

CSS:

 .bottom-menu li ul { 
     display:none; 
     } 

JS:

jQuery(function ($) { 
    // jQuery code in here can safely use $ 
    $('.bottom-menu li') 
     .css({ 
     cursor: "pointer" 
    }); 

    $(".drop>a").on('click', function (eventData) { 
     var $listItem = $(this).closest('li'); 

     $listItem.find('ul').toggle(); 
     $listItem.toggleClass('open'); 

     $.cookie('open_items', 'the_value'); 
     openItems = new Array(); 
     $("li.drop").each(function (index, item) { 
      if ($(item).hasClass('open')) { 
       openItems.push(index); 
      } 
     }); 
     $.cookie('open_items', openItems.join(',')); 
    }); 

    if ($.cookie('open_items') && $.cookie('open_items').length > 0) { 
     previouslyOpenItems = $.cookie('open_items'); 
     openItemIndexes = previouslyOpenItems.split(','); 
     $(openItemIndexes).each(function (index, item) { 
      $("li.drop").eq(item).addClass('open').find('ul').toggle(); 
     }); 
    } 
}); 

jsFiddle

Answer 1

Fügen Sie diese Zeile $(".bottom-menu li").removeClass('open');

hinzufügen, um dieses css

.bottom-menu li ul { 
    display:none; 
} 
.bottom-menu li.open ul{ 
    display:block; 
} 




jQuery(function ($) { 
     // jQuery code in here can safely use $ 
     $('.bottom-menu li') 
      .css({ 
      cursor: "pointer" 
     }); 

     $(".drop>a").on('click', function (eventData) { 
     $(".bottom-menu li").removeClass('open');// Add This Line 
      var $listItem = $(this).closest('li'); 


      $listItem.toggleClass('open'); 

      $.cookie('open_items', 'the_value'); 
      openItems = new Array(); 
      $("li.drop").each(function (index, item) { 
       if ($(item).hasClass('open')) { 
        openItems.push(index); 
       } 
      }); 
      $.cookie('open_items', openItems.join(',')); 
     }); 

     if ($.cookie('open_items') && $.cookie('open_items').length > 0) { 
      previouslyOpenItems = $.cookie('open_items'); 
      openItemIndexes = previouslyOpenItems.split(','); 
      $(openItemIndexes).each(function (index, item) { 
       $("li.drop").eq(item).addClass('open'); 
      }); 
     } 
    }); 

https://jsfiddle.net/rb2wxurL/2/

Answer 2

Wie Flamme bereits erwähnt, was wollen Sie auf Klick

von Ihrem snipped Herausgegeben tun, ist alles in der Nähe (ausblenden)

  $('.bottom-menu ul').each(function() { 
       $(this).hide(); 
      }); 

nach dem Click-Ereignis hinzugefügt (bottom-Menü Klasse nimmt, findet jede ungeordnete Liste innen und versteckt es)

https://codepen.io/anon/pen/WXZaNe

Answer 3

Hoffnung, dies hilft Ihnen.

jQuery(function ($) { 
 
    // jQuery code in here can safely use $ 
 

 
    $(".drop>a").on('click', function (eventData) { 
 
     var $listItem = $(this).closest('li'); 
 
\t \t \t \t $('.drop ul').hide(); 
 
     $listItem.find('ul').toggle(); 
 
     $listItem.toggleClass('open'); 
 
     
 
     //$.cookie('open_items', 'the_value'); 
 
     openItems = new Array(); 
 
     $("li.drop").each(function (index, item) { 
 
      if ($(item).hasClass('open')) { 
 
       openItems.push(index); 
 
      } 
 
     }); 
 
     //$.cookie('open_items', openItems.join(',')); 
 
    }); 
 

 
    //if ($.cookie('open_items') && $.cookie('open_items').length > 0) { 
 
    // previouslyOpenItems = $.cookie('open_items'); 
 
    // openItemIndexes = previouslyOpenItems.split(','); 
 
    // $(openItemIndexes).each(function (index, item) { 
 
    //  $("li.drop").eq(item).addClass('open').find('ul').toggle(); 
 
    // }); 
 
    //} 
 
});

.bottom-menu li ul { 
 
    display:none; 
 
} 
 
.bottom-menu li{ 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="bottom-menu"> 
 
    <li class="drop"><a>Hyperlink 1</a></li> 
 
    <li class="drop"><a>Hyperlink 2</a> 
 
     <ul id="m1" class="bottom-menu-sub"> 
 
     <li><a href="#">Hyperlink Sub</a></li> 
 
     <li><a href="#">Hyperlink Sub</a></li> 
 
     <li><a href="#">Hyperlink Sub</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="drop"><a>Hyperlink 3</a> 
 
     <ul id="m2"> 
 
     <li><a href="#">Hyperlink Sub</a></li> 
 
     <li><a href="#">Hyperlink Sub</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="drop"><a>Hyperlink 4</a> 
 
     <ul id="m3"> 
 
     <li><a href="#">Hyperlink Sub</a></li> 
 
     <li><a href="#">Hyperlink Sub</a></li> 
 
     </ul> 
 
    </li> 
 
</ul> 
 

 

 
<p>If you open the "Hyperlink 2", the sub menu will show (that's as entended),</br> Althought once you click "Hyperlink 3" the sub-menus of "Hyperlink 2" stay open. 
 
</p>