1
У меня есть раскрывающееся меню CSS, которое, кажется, работает отлично, за исключением одной вещи, которая заключается в том, чтобы сбрасывать выпадающие меню каждый раз при нажатии любой из ссылок внутри подменю. Поэтому, когда пользователь щелкает ссылку в подменю, они могут просматривать содержимое в том, что у меня есть на той же странице, с помощью JQuery.Свернуть или скрыть раскрывающееся меню CSS при щелчке пункта меню
Я видел различные вопросы относительно того, как свернуть раскрывающиеся меню 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;
}
Если я понять, что вы хотите показать теги sub li при нажатии кнопки pal li tag? – Seazoux
На самом деле подменю показывает, и ссылки работают нормально, но мне нужно, чтобы мы могли скрыть/свернуть подменю или выпадающий список элементов, когда один из элементов списка, которые также удерживают ссылки, нажал. Итак, как вы это достигаете. – ManUO