0
これを試してみましたが、第2レベルのサブメニュー以外はすべてOKです 別のアイテムのサブメニューを選択すると自動的に閉じません gor example page1-3とpage1-4を選択した場合の例 1-3は、まだ私はtoggleulよりサブメニュー内のすべてのメニューは、より多くのを見つけるには、下記スニペットでサブメニューを隠すのクリック時に最初に何ができるか、再び彼らに他の項目をクリックしてサブメニューを自動的に閉じるにはどうしたらいいですか？
<!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>
あなたのトグル前にこれを置く： '$（この）.closest（ 'ul.navbar-NAV '）.find（' ul.dropdown-menu '）。hide（） ' – Pete
[要素外のクリックを検出するにはどうすればいいですか？]（http://stackoverflow.com/questions/152975/how-do -i-detect-a-click-outside-an-element） –