Свернуть или скрыть раскрывающееся меню CSS при нажатии на элемент меню

Вопрос:

У меня есть раскрывающееся меню 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

Надеюсь, что это помогло :)

Оцените статью
TechArks.Ru
Добавить комментарий