如何通過點擊其他項目自動關閉子菜單？

我試過了，一切都正常，除了二級子菜單它不會自動關閉當我選擇另一個項目的子菜單 gor例如當我選擇page1-3然後page1-4 項目的1-3仍停留在頁面直到我再次點擊它們如何通過點擊其他項目自動關閉子菜單？

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

來源

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

把這個你切換前：'$（本）.closest（'ul.navbar-NAV '）.find（'ul.dropdown-menu'）。hide（）' – Pete

可能重複[如何檢測單元外點擊？]（http://stackoverflow.com/questions/152975/how-do -i-檢測-A-點擊外的元件） –

你可以做的是首先在子菜單中隱藏的點擊子菜單裏面所有的菜單比toggleul找到更多在下面片斷

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

來源

2017-03-27 13:08:51 Curiousdev

添加到您的腳本：

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

解決代碼：

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

來源

2017-03-27 13:12:57

如何通過點擊其他項目自動關閉子菜單？

回答

相關問題