他のアイテムのクリックでドロップダウンが行われない

他のメニューアイテムがクリックされたときに開いた場合に、折りたたみたい複数の要素が含まれているdropdownsがあります。ここで私はこれまで持っているものです。他のアイテムのクリックでドロップダウンが行われない

<head> 
 
    <meta charset="utf-8"> 
 
    <title>Test</title> 
 
    <!-- Bootstrap CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <!-- Master CSS --> 
 
    <link rel="stylesheet" href="master.css"> 
 
    <!-- jQuery --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <!-- Bootstrap JS --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <nav class="sidebar" id="sidebar-id"> 
 
     <ul class="list-unstyled nav components"> 
 
     <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i>Home</a></li> 
 
     <li> 
 
      <a href="#aboutSubmenu" data-toggle="collapse" aria-expanded="false"><i class="glyphicon glyphicon-briefcase"></i>About</a> 
 
      <ul class="collapse list-unstyled" id="aboutSubmenu"> 
 
      <li><a href="#">Pages 1</a></li> 
 
      <li><a href="#">Pages 2</a></li> 
 
      <li><a href="#">Pages 3</a></li> 
 
      </ul> 
 
     </li> 
 

 
     <li> 
 
      <a href="#pagesSubmenu" data-toggle="collapse" aria-expanded="false"><i class="glyphicon glyphicon-duplicate"></i>Pages</a> 
 
      <ul class="collapse list-unstyled" id="pagesSubmenu"> 
 
      <li><a href="#">Pages 1</a></li> 
 
      <li><a href="#">Pages 2</a></li> 
 
      <li><a href="#">Pages 3</a></li> 
 
      </ul> 
 
     </li> 
 

 
     <li><a href="#"><i class="glyphicon glyphicon-link"></i> Portfolio</a></li> 
 
     <li><a href="#"><i class="glyphicon glyphicon-send"></i>Contact</a></li> 
 
     </ul> 
 
    </nav> 
 
    <!-- end sidebar --> 
 
</body>

あなたがクリックしたときにあなたが見ることができるように「約」またはそのドロップダウンが開い「ページ」、あなたはをクリックしない限り、しかし、彼らは閉じていません再び特定の見出しになります。ドロップダウンの見出しをクリックしない限り、開いているドロップダウンを希望します。この場合、すべてのドロップダウンが閉じられ、次に正しいドロップダウンが開きます。

出典

2017-11-20 CBreeze

この動作が必要な場合は、リストの代わりにアコーディオンを使用することをおすすめします。https://getbootstrap.com/docs/3.3/javascript/#collapse-example-accordion –

@RoryMcCrossanナビゲーションで使用しますか？サイト上のナビゲーションバーとして使用されるサイドバーです。 – CBreeze

あなたが達成しようとしている正確な振る舞いを複製すると、なぜそれが問題になるのかわかりません。 –

ここでは、ソリューション

$('a').click(function(){ 
 
    if(!$(this).next('ul').hasClass('in')) { 
 
    $('.collapse').each(function(){ 
 
     $(this).removeClass('in'); 
 
    }); 
 
    } 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<div class="wrapper"> 
 
<nav class="sidebar" id="sidebar-id"> 
 
    <ul class="list-unstyled nav components"> 
 
    <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i>Home</a></li> 
 
    <li> 
 
     <a href="#aboutSubmenu" data-toggle="collapse" aria-expanded="false"><i class="glyphicon glyphicon-briefcase"></i>About</a> 
 
     <ul class="collapse list-unstyled" id="aboutSubmenu"> 
 
     <li><a href="#">Pages 1</a></li> 
 
     <li><a href="#">Pages 2</a></li> 
 
     <li><a href="#">Pages 3</a></li> 
 
     </ul> 
 
    </li> 
 

 
    <li> 
 
     <a href="#pagesSubmenu" data-toggle="collapse" aria-expanded="false"><i class="glyphicon glyphicon-duplicate"></i>Pages</a> 
 
     <ul class="collapse list-unstyled" id="pagesSubmenu"> 
 
     <li><a href="#">Pages 1</a></li> 
 
     <li><a href="#">Pages 2</a></li> 
 
     <li><a href="#">Pages 3</a></li> 
 
     </ul> 
 
    </li> 
 

 
    <li><a href="#"><i class="glyphicon glyphicon-link"></i> Portfolio</a></li> 
 
    <li><a href="#"><i class="glyphicon glyphicon-send"></i>Contact</a></li> 
 
    </ul> 
 
</nav>

これはあなたを助けることを願って行きます。

出典

2017-11-20 15:38:34 Shiladitya

最初の数回動作するように見えますが、 'ページ'はつまずく傾向があり、もう開きません。 – CBreeze

@CBreeze更新された答えを確認してください。問題は 'slideUp'である可能性があります。だから、私はそれをremoveClassに変更します。 – Shiladitya

他のアイテムのクリックでドロップダウンが行われない

答えて

関連する問題