Question

我创建了一个带有bootstrap 3框架的网站。现在的问题是，单击子菜单项后，下拉子菜单未关闭。我的模板使用悬停功能来显示子菜单项。我想在用户点击子菜单项时关闭下拉列表。

例如，服务菜单包含子菜单列表。当用户点击任何项目时，应关闭整个子菜单。怎么做？有什么建议？ sitelink

Answer 1

使用css代码中的显示块

 docker run -d -p 80:80 --name=apache  httpd:2.4

Answer 2

jQuery( ".dropdown-menu li a" ).click(function() {
  jQuery("ul.dropdown-menu").css("display", "none");
});

Answer 3

您可以使用额外的类来选择具有下拉元素的菜单项。对于这个例子，一个类＆＃34;触发＆＃34;用于定义哪些具有子元素。

＆＃13;

$(function(){
	$(".dropdown-menu > li > a.trigger").on("click",function(e){
		var current=$(this).next();
		var grandparent=$(this).parent().parent();
		if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
			$(this).toggleClass('right-caret left-caret');
		grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
		grandparent.find(".sub-menu:visible").not(current).hide();
		current.toggle();
		e.stopPropagation();
	});
	$(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
		var root=$(this).closest('.dropdown');
		root.find('.left-caret').toggleClass('right-caret left-caret');
		root.find('.sub-menu:visible').hide();
	});
});

＆＃13;

.dropdown-menu>li
{	position:relative;
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
	cursor:pointer;
}
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    display:none;
    margin-top: -1px;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	border-left-color:#fff;
	box-shadow:none;
}
.right-caret:after,.left-caret:after
 {	content:"";
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
	margin-left:5px;
}
.right-caret:after
{	border-left: 5px solid #ffaf46;
}
.left-caret:after
{	border-right: 5px solid #ffaf46;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown" style="position:relative">
	<a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Click Here <span class="caret"></span></a>
	<ul class="dropdown-menu">
		<li>
			<a class="trigger right-caret">Level 1</a>
			<ul class="dropdown-menu sub-menu">
				<li><a href="#">Level 2</a></li>
				<li>
					<a class="trigger right-caret">Level 2</a>
					<ul class="dropdown-menu sub-menu">
						<li><a href="#">Level 3</a></li>
						<li><a href="#">Level 3</a></li>
						<li>
							<a class="trigger right-caret">Level 3</a>
							<ul class="dropdown-menu sub-menu">
								<li><a href="#">Level 4</a></li>
								<li><a href="#">Level 4</a></li>
								<li><a href="#">Level 4</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="#">Level 2</a></li>
			</ul>
		</li>
		<li><a href="#">Level 1</a></li>
		<li><a href="#">Level 1</a></li>
	</ul>
</div>

＆＃13;

Answer 4

试试这个jquery

$( ".dropdown" ).click(function() {
  $(".dropdown").removeClass("open");
  $("#menulink + .dropdown-menu").css("display", "none");
});

在点击链接时删除公开的下拉类

单击Bootstrap后关闭下拉子菜单

4 个答案: