Jquery add click event und entferne es zu anderen

Wie man automatisch eine Dropdown-Liste schließt, wenn der Benutzer auf einen anderen klickt? Der Zweck ist nicht nur eine Dropdown-Liste geöffnet zu der Zeit.Jquery add click event und entferne es zu anderen

JQuery:

jQuery(".navbar-collapse .nav li").click(function(e) { 

     if(jQuery(e.currentTarget).find("span").hasClass("clicked-li")) { 
      jQuery(".navbar-collapse .nav li ul").removeClass("clicked"); 
      jQuery(".navbar-collapse .nav li span").removeClass("clicked-li"); 
     } 

     if ((viewport().width <= 1200)) { 
      if (!jQuery(e.currentTarget).find("ul").hasClass("clicked")) { 
       jQuery(e.currentTarget).find("ul").addClass('clicked'); 
       jQuery(e.currentTarget).find("span").addClass('clicked-li'); 
      } else { 
       jQuery(e.currentTarget).find("ul").removeClass('clicked'); 
       jQuery(e.currentTarget).find("span").removeClass('clicked-li'); 
      } 
     } 
    });

HTML:

<div class="navbar-collapse collapse in" aria-expanded="true" style=""> 
    <ul class="nav menu"> 
     <li class="item-101 default current active fa fa-chevron-down"> 
      <a href="/">Home</a>< 
     /li><li class="item-115 divider deeper parent fa fa-chevron-down"> 
     <span class="separator">XXX</span> 
     <ul class="nav-child unstyled small"> 
      <li class="item-123 fa fa-chevron-down"> 
       <a href="XXX">XXX</a> 
      </li> 
      <li class="item-125 fa fa-chevron-down"> 
       <a href="XXX">XXX</a> 
      </li><li class="item-126 fa fa-chevron-down"> 
       <a href="XXX">XXX</a> 
      </li> 
     </ul> 
    </ul> 
</div>

Es scheint ziemlich werden für mich nervt heraus, Wer weiß, wie dies zu tun?

Quelle

2017-11-24 Brum

Es würde helfen, eine Menge zu Ihrem HTML zu sehen. Könnten Sie bitte Ihre Frage bearbeiten, um sie aufzunehmen? Beachten Sie auch, dass Sie Ihre 'if'-Anweisungen entfernen und durch einen einzigen 'toggleClass()' -Aufruf ersetzen können. –

Ich habe es bearbeitet und kann die Klassenarbeit umschalten, wenn dann? – Brum

Gibt es einen bestimmten Grund, warum Sie nicht die mitgelieferte 'bootstrap (.min) .js' verwenden, die bereits das tut, was Sie anfordert? Wenn Sie nicht alle "Bootstrap.js" laden möchten, können Sie anpassen, welche Module darin enthalten sind und nur die gewünschten auswählen. Stellen Sie sicher, dass Sie "Dropdown" unter "Javascript-Komponenten" auswählen. –

$('.clicked').removeClass('.clicked');

Aber machen Sie Ihren Code ein Schnipsel, das es einfacher macht, Ihnen zu helfen.

Aber mach es sowieso mit CSS. Es ist viel einfacher.

li { 
 
    display: none; 
 
} 
 
a:focus li { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>test</title> 
 
</head> 
 

 
<body><ul> 
 
<a href="#">HO 
 

 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
</a> 
 
</ul><br> 
 
<ul> 
 
<a href="#">asdf 
 
    <li>Hi</li> 
 
    <li>Hi</li> 
 
</a> 
 
</ul> 
 
</body> 
 
</html>

Quelle

2017-11-24 16:23:14 Xeff

Jquery add click event und entferne es zu anderen

Antwort

Verwandte Themen