Jquery 打开和关闭所有Twitter引导下拉菜单onClick的按钮
谢谢你抽出时间来调查我的问题 为了进一步澄清，我在下面提供了一些示例代码。如果您先单击“发布”菜单项，然后单击“全部关闭”按钮，它不会全部关闭，我希望它Jquery 打开和关闭所有Twitter引导下拉菜单onClick的按钮,jquery,twitter-bootstrap,drop-down-menu,Jquery,Twitter Bootstrap,Drop Down Menu,谢谢你抽出时间来调查我的问题 为了进一步澄清，我在下面提供了一些示例代码。如果您先单击“发布”菜单项，然后单击“全部关闭”按钮，它不会全部关闭，我希望它 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap dropdown</title>
<!-- Bootstrap -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background: #222222;
}
.nav-tabs {
border-bottom: none;
margin-left: 0;
}
ul.nav .dropdown.open {
background: #323433;
}
ul.nav .dropdown.open button span.caret {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
ul.nav .dropdown-menu > li > a:focus, ul.nav .dropdown-menu > li > a:hover {
color: #262626;
text-decoration: none;
background-color: #000000;
}
ul.nav .dropdown-menu li.active {
background: #008265;
}
ul.nav .dropdown {
border-bottom: solid 1px #3f3f3f;
position: initial !important;
clear: both;
}
ul.nav .dropdown .btn-default {
background-color: transparent;
border: none;
display: block;
padding: 12px 30px 12px 20px;
color: white;
margin-left: 0;
position: relative;
width: 100%;
text-align: left;
}
ul.nav .dropdown .btn-default .caret {
position: absolute;
right: 15px;
top: 22px;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid white;
border-right: none;
-moz-transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
ul.nav .dropdown ul.dropdown-menu {
position: initial;
width: 100%;
background: #323433;
padding-top: 0px;
padding-bottom: 5px;
border-top: none;
border-right: none;
border-radius: 0;
}
ul.nav .dropdown ul.dropdown-menu li a {
padding: 5px 5px 5px 30px;
color: white;
}
ul.nav .dropdown ul.dropdown-menu > .active > a {
color: #fff;
text-decoration: none;
background-color: transparent;
outline: 0;
}
ul.nav .dropdown.open ul.dropdown-menu {
display: block !important;
}
</style>
</head>
<body>
<div class="container">
<ul id="accordion" class="nav nav-tabs">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"
aria-expanded="false">
Library
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Carriers</a></li>
<li><a href="#">Threats</a></li>
<li><a href="#">Mitigations</a></li>
</ul>
</div>
<!-- end of menu-->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Publication
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Library Threat Changes</a></li>
<li><a href="#">Library
Mitigation Changes</a></li>
<li><a href="#">Published Data</a></li>
</ul>
</div>
<!-- end of menu-->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Publication
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Library Threat Changes</a></li>
<li><a href="#">Library
Mitigation Changes</a></li>
<li><a href="#">Published Data</a></li>
</ul>
</div>
<!-- end of menu-->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Publication
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Library Threat Changes</a></li>
<li><a href="#">Library
Mitigation Changes</a></li>
<li><a href="#">Published Data</a></li>
</ul>
</div>
<!-- end of menu--></ul>
</div>
<div class="container">
<button class="openall" style="display:inline-block;">Expand</button>
<button class="closeall" style="display:inline-block;">Collapse</button>
</div>
</div>
<!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script>
$('.openall').click(function(e){
$('#accordion').removeClass('collapseMenu')
$('.dropdown').removeClass('open')
$('.dropdown').addClass('open');
$('.dropdown button').attr('aria-expanded','true');
e.stopPropagation();
});
$('.closeall').click(function(e){
$('.dropdown').removeClass('open')
$('.dropdown button').attr('aria-expanded','false');
$('#accordion').removeClass('collapseMenu')
e.stopPropagation();
});
// ADD SLIDEDOWN ANIMATION TO DROPDOWN //
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
</script>
</body>
</html>
你可以使用这个插件 和addClass'open'展开所有下拉项
移除类“打开”以折叠它们。可能重复的@Jim下拉列表与手风琴不同