2017-12-22 20 views
0

Ich bin schon das Multi-Level Drop Down versuchen. Wenn ich 2 oder mehr Dropdown-Untermenü habe. Wenn ich auf das erste Dropdown-Menü klicke und dann auf ein anderes Dropdownfeld klicke, wird das erste Dropdown-Menü geöffnet. Ich möchte, wenn ich auf das zweite Drop-down-Menü klicke, wird das erste Drop-Down-Menü geschlossen oder wenn ich auf Drop-down-Kopf klicke, werden alle Unter-Dropdown-Menüs geschlossen.Multi Level Drop Downsrap

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <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> 
 
<style> 
 
.dropdown-submenu { 
 
    position: relative; 
 
} 
 

 
.dropdown-submenu .dropdown-menu { 
 
    top: 0; 
 
    left: 100%; 
 
    margin-top: -1px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
    
 
<div class="container"> 
 
    <h2>Multi-Level Dropdowns</h2> 
 
    <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p> 
 
    <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>           
 
    <div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials 
 
    <span class="caret"></span></button> 
 
    <ul class="dropdown-menu"> 
 
     <li><a tabindex="-1" href="#">HTML</a></li> 
 
     <li><a tabindex="-1" href="#">CSS</a></li> 
 
     <li class="dropdown-submenu"> 
 
     <a class="test" tabindex="-1" href="#">New dropdown 1 <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
 
      <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
 
      <li class="dropdown-submenu"> 
 
      <a class="test" href="#">Another dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">3rd level dropdown</a></li> 
 
       <li><a href="#">3rd level dropdown</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="dropdown-submenu"> 
 
     <a class="test" tabindex="-1" href="#">New dropdown 2 <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
 
      <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
 
      <li class="dropdown-submenu"> 
 
      <a class="test" href="#">Another dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">3rd level dropdown</a></li> 
 
       <li><a href="#">3rd level dropdown</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div> 
 

 
<script> 
 
$(document).ready(function(){ 
 
    $('.dropdown-submenu a.test').on("click", function(e){ 
 
    $(this).next('ul').toggle(); 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    }); 
 
}); 
 
</script> 
 

 
</body> 
 
</html>

enter image description here

+0

zeigen uns etwas, wie Skript, html – Se0ng11

+0

run Code-Schnipsel @ Se0ng11 – Stfvns

+0

Sie verwenden sollten: http://geedmo.github.io/yamm/ –

Antwort

2

Sie können diese mit CSS tun, jQuery addClass('active') & toggleClass('active') in CSS müssen Sie display: none; machen für alle dropmenu

hier gehen Sie

$(document).ready(function(){ 
 
    $('.dropdown-submenu a.test').on("click", function(e){ 
 
    $(this).next('ul').toggle(); 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    }); 
 
}); 
 

 
$(function() { 
 
$('#drop1').on('click', function(){ 
 
\t \t $('.dropmenu1').toggleClass('active'); 
 
    $('.dropmenu2').removeClass('active'); 
 
}); 
 

 
$('#drop2').on('click', function(){ 
 
\t \t $('.dropmenu1').removeClass('active'); 
 
\t $('.dropmenu2').toggleClass('active'); 
 
}); 
 

 
$('#drop3').on('click', function(){ 
 
\t \t $('.dropmenu3').toggleClass('active'); 
 
}); 
 

 
$('#drop4').on('click', function(){ 
 
\t \t $('.dropmenu4').toggleClass('active'); 
 
}); 
 
$('#button-t').on('click', function(){ 
 
\t \t $('.dropmenu1').removeClass('active'); 
 
\t \t $('.dropmenu2').removeClass('active'); 
 
\t \t $('.dropmenu3').removeClass('active'); 
 
\t \t $('.dropmenu4').removeClass('active'); 
 
}); 
 
});
.dropdown-submenu { 
 
    position: relative; 
 
} 
 

 
.dropdown-submenu .dropdown-menu { 
 
    top: 0; 
 
    left: 100%; 
 
    margin-top: -1px; 
 
} 
 
ul.dropdown-menu ul.dropdown-menu{ 
 
    display:none !important; 
 
} 
 
ul.dropdown-menu ul.dropdown-menu.active{ 
 
    display:block !important; 
 
} 
 
ul.dropdown-menu ul
<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/2.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <h2>Multi-Level Dropdowns</h2> 
 
    <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p> 
 
    <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>           
 
    <div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" id="button-t">Tutorials 
 
    <span class="caret"></span></button> 
 
    <ul class="dropdown-menu"> 
 
     <li><a tabindex="-1" href="#">HTML</a></li> 
 
     <li><a tabindex="-1" href="#">CSS</a></li> 
 
     <li class="dropdown-submenu"> 
 
     <a class="test" tabindex="-1" href="#" id="drop1"> New dropdown 1 <span class="caret"></span></a> 
 
     <ul class="dropdown-menu dropmenu1"> 
 
      <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
 
      <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
 
      <li class="dropdown-submenu"> 
 
      <a class="test" href="#" id="drop3">Another dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu dropmenu3"> 
 
       <li><a href="#">3rd level dropdown</a></li> 
 
       <li><a href="#">3rd level dropdown</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="dropdown-submenu" > 
 
     <a class="test" tabindex="-1" href="#" id="drop2">New dropdown 2 <span class="caret"></span></a> 
 
     <ul class="dropdown-menu dropmenu2"> 
 
      <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
 
      <li><a tabindex="-1" href="#">2nd level dropdown</a></li> 
 
      <li class="dropdown-submenu"> 
 
      <a class="test" href="#" id="drop4">Another dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu dropmenu4"> 
 
       <li><a href="#">3rd level dropdown</a></li> 
 
       <li><a href="#">3rd level dropdown</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>