Wie kann ich ein Untermenü automatisch schließen, indem ich auf andere Elemente klicke?

Ich habe es versucht, und alles ist OK außer zweite Ebene Untermenüs es schließt nicht automatisch, wenn ich die Untermenüs eines anderen Artikels Beispiel wählen, wenn ich Seite1-3 und dann page1-4 Elemente der wählen 1-3 bleiben noch in Seite, bis ich auf sie klicken Sie erneutWie kann ich ein Untermenü automatisch schließen, indem ich auf andere Elemente klicke?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Case</title> 
    <meta charset="utf-8"> 
    <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.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style> 


    @media only screen and (min-width: 500px) { 
    nav{float:right; 
    } 
    li{ 
    float:right !important; 
    text-align:right; 
    direction:rtl ; 
    } 
    .dropdown-menu{ 
    right:0 !important; 
    } 
               } 
     nav{text-align:right; } 
     li{text-align:right; direction:rtl;} 
.dropdown-submenu { 
    position: relative; 
} 

.dropdown-submenu .dropdown-menu { 
    top: 0; 
    margin-right: 100%; 
    margin-top: -1px; 
} 
</style> 

</head> 
<body> 

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
     </button> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Page 1-1</a></li> 
      <li><a href="#">Page 1-2</a></li> 

      <li class="dropdown-submenu"> 
      <a class="test" href="#">Page 1-3<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> 

      <li class="dropdown-submenu"> 
      <a class="test" href="#">Page 1-4<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">4rd level dropdown</a></li> 
       <li><a href="#">4rd level dropdown</a></li> 
      </ul> 
      </li> 

      </ul> 
     </li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
     </ul> 

    </div> 
    </div> 
</nav> 

    <script> 

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

</script> 

</body> 
</html>

Quelle

2017-03-27 انجام پایان نامه مدیریت

setzen diese vor Ihrer Toggle: '$ (this) .closest ('ul.navbar-nav ') .find (' ul.dropdown-menu '). hide() ' – Pete

Mögliches Duplikat von [Wie erkenne ich einen Klick außerhalb eines Elements?] (http://stackoverflow.com/questions/152975/how-do -i-detect-a-click-außerhalb eines Elements –

Was Sie zuerst auf klicken Untermenü auszublenden tun können innerhalb Untermenü alle Menü als toggle ist ul mehr finden unter snippet in

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Case</title> 
 
    <meta charset="utf-8"> 
 
    <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.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <style> 
 

 

 
    @media only screen and (min-width: 500px) { 
 
    nav{float:right; 
 
    } 
 
    li{ 
 
    float:right !important; 
 
    text-align:right; 
 
    direction:rtl ; 
 
    } 
 
    .dropdown-menu{ 
 
    right:0 !important; 
 
    } 
 
               } 
 
     nav{text-align:right; } 
 
     li{text-align:right; direction:rtl;} 
 
.dropdown-submenu { 
 
    position: relative; 
 
} 
 

 
.dropdown-submenu .dropdown-menu { 
 
    top: 0; 
 
    margin-right: 100%; 
 
    margin-top: -1px; 
 
} 
 
</style> 
 

 
</head> 
 
<body> 
 

 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span>       
 
     </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Page 1-1</a></li> 
 
      <li><a href="#">Page 1-2</a></li> 
 

 
      <li class="dropdown-submenu"> 
 
      <a class="test" href="#">Page 1-3<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> 
 

 
      <li class="dropdown-submenu"> 
 
      <a class="test" href="#">Page 1-4<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">4rd level dropdown</a></li> 
 
       <li><a href="#">4rd level dropdown</a></li> 
 
      </ul> 
 
      </li> 
 

 
      </ul> 
 
     </li> 
 
     <li><a href="#">Page 2</a></li> 
 
     <li><a href="#">Page 3</a></li> 
 
     </ul> 
 

 
    </div> 
 
    </div> 
 
</nav> 
 

 
    <script> 
 

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

 
</script> 
 

 
</body> 
 
</html>

Quelle

2017-03-27 13:08:51 Curiousdev

Fügen Sie diese auf Ihrem Skript:

$('.dropdown-submenu > ul').hide();

gelöst Code ist:

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

Quelle

2017-03-27 13:12:57

Wie kann ich ein Untermenü automatisch schließen, indem ich auf andere Elemente klicke?

Antwort

Verwandte Themen