Jqueryクリックイベントを追加して他のユーザーに削除する

ユーザーが別のイベントをクリックしたときにドロップダウンリストを自動的に閉じる方法は？目的は、時刻に開かれたドロップダウンリストが1つだけであるということではありません。Jqueryクリックイベントを追加して他のユーザーに削除する

の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>

これはかなり私のために盗聴されているようだが、誰もがこれを行う方法を知っているのですか？

出典

2017-11-24 Brum

それはあまりにもあなたのHTMLを見るために大いに役立つでしょう。あなたの質問を編集してそれを含めてください。また、 'if'文を削除して、' toggleClass（） 'という単一の呼び出しで置き換えることもできます。 –

私はそれを編集しました。 – Brum

あなたがリクエストしているものをすでに提供している 'bootstrap（.min）.js'を使用しない特別な理由はありますか？ 'Bootstrap.js'のすべてをロードしたくない場合は、どのモジュールがそれに含まれているかをカスタマイズして、必要なものだけを選択することができます。 'Javascript components'の' Dropdown'を必ず選択してください。 –

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

しかし、あなたのコードをスニペットにしておくと、より簡単に役立ちます。

しかし、とにかくそれをCSSで行います。はるかに簡単です。

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>

出典

2017-11-24 16:23:14 Xeff

Jqueryクリックイベントを追加して他のユーザーに削除する

答えて

関連する問題