我有一个CSS下拉菜单，看起来很不错，除了一件事，那就是每次单击子菜单中的任何链接时，都会折叠下拉菜单项。因此，当用户单击子菜单中的链接时，他们可以使用JQuery来查看与我在同一页面中的内容。
我已经看到了关于如何折叠onClick下拉菜单的不同问题，但它们对我的情况似乎没有帮助。
这是我的示例html和CSS，希望有人可以帮助我纠正此问题。最初，我不得不努力将内容加载到
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css_dropdown.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<title>CSS Dropdown menu with load content in DIV element</title>
</head>
<body>
<ul class="sectiontitle">
<li>Documents <ul class="section">
<li><a href="./docs/test1.html">Document 1</a></li>
<li><a href="./docs/test2.html">Document 2</a></li>
<li><a href="./docs/test3.html">Document 3</a></li>
</ul></li>
<li>Items <ul class="section">
<li><a href="./items/test1.html">Item 1</a></li>
<li><a href="./items/test2.html">Item 2</a></li>
<li><a href="./items/test3.html">Item 3</a></li>
</ul></li>
<li>Products <ul class="section">
<li><a href="./prods/test1.html">Product 1</a></li>
<li><a href="./prods/test2.html">Product 2</a></li>
<li><a href="./prods/test3.html">Product 3</a></li>
</ul></li>
</ul>
<div class="container">
<!-- This is an empty container for loading linked content allowing to stay on the same page as the dropdown list -->
</div>
<!--This script needs to be loaded last for the browser to accept to make it work.-->
<script type="text/javascript">
$(".section").on("click", "a", function(e){
e.preventDefault();
$(".container").load( $(this).prop("href") );
// Stop regular handling of "click" in IE (and some others)
return false;
});
</script>
</body>
</html>
这是CSS
body, .title.topictitle2 {
width:auto;
margin-top:0;
margin-left:.8em;
font-family:"news cycle", helvetica, sans-serif;
font-size: .95em;
height:auto;
}
#container {
position:fixed;
top:2.25em;
text-transform:capitalize;
background: #c65;
width: 100%;
/*overflow:inherit;*/
z-index: 1;
}
.sectiontitle{
margin:0;
padding:0 1em;
background:#194879;
height:2.25em;
list-style:none;
z-index: 2;
/* position:fixed;*/
}
.sectiontitle > li{ /* We target only the list element inside ul.sectiontitle class*/
float:left;
height:100%;
margin-right:0; /*To control how far apart from the right each <li> should be positioned from the other*/
padding:0 .02em;
}
.sectiontitle > li{
float:left;
height:100%;
color:white;
font-family:"news cycle", helvetica, sans-serif;
font-size:.9em;
text-decoration:none;
line-height:2;
text-transform:capitalize;
/* border-right: solid white .03em;*/
}
ul.sectiontitle li:hover{
color:orange;
border-bottom:.1em dotted #224480;
/* text-decoration:underline; */
}
/* Contextual positioning for the children under the .sectiontitle list items*/
ul.section{
position:relative;
left:-1.12em;
z-index: 3;
}
ul.section{
/* width:10em;*/
margin:0 0 0;
padding:0 0 0;
list-style:none;
background:repeat scroll 0% 0% rgb(15, 161, 224);
position:relative; /*Very important to keep the children ul.section aligned with its parent ul.sectiontitle*/
top:-1000em;
}
ul.section{
width:auto; /* dropdown list width better when set to auto*/
margin:0 auto 0.3em auto;
white-space:inherit;
border: solid #224480 0.01em;
}
ul.section li a{
height:100%;
display:block;
padding:0.3em 1em 0; /*Set padding around the text in the list items under ul.section elements*/
color:#fff;
/*font-weight:bold;*/
text-decoration:none;
}
ul.section li a:hover{
background:#69F;
/*text-decoration:underline;*/
}
/* This controls the position of the child ul.section from the top horizontal bar*/
.sectiontitle > li:hover ul.section{
top:.47em;
}
.container p:last-child:focus {
background: #399;
}
您可以使用.mouseleave方法隐藏鼠标离开时的菜单。
如果要在单击某个项目时隐藏菜单，则可以将此菜单添加到代码中，<head>最好在标签中。以下代码在jQuery中：
$(function(){
$("a").click(function(){
$("#menu").hide(); //or $("#menu").slideUp() if you want it to slide up instead of just disappearing.
});
});
这告诉浏览器每当单击链接时就关闭菜单。如果网页文本中还有其他链接，则可以在类中包含菜单链接，而改用该类。
例如：
<ul id="menu">
<li><a href="#" class="mitem">Item 1</a></li>
</ul>
然后，jQuery代码将是：
$(function(){
$(".mitem").click(function(){
$("#menu").hide();
});
});
这是一个完整的工作示例-JSFIDDLE
希望能有所帮助 :)
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句