Когда я задаю $('.btn-list').hover
, то всё работает. Когда задаю $('.btn-list').click
, всё перестает работать.
Делал ещё $('.btn-list').bind('click', 'a', function())
, то клик работает, но только один раз: он опускает меню, а обратно не работает.
$(document).ready(function() {
$('.btn-list').click(function() {
$(this).children('ul').stop(false, true).slideDown('slow');
}, function() {
$(this).children('ul').stop(false, true).fadeOut(300);
});
});
$(document).ready(function() {
$('.btn-list').click(function() {
$(this).children('ul').stop(false, true).slideDown('slow');
}, function() {
$(this).children('ul').stop(false, true).fadeOut(300);
});
});
#nav
{
margin: 30px;
}
#nav li
{
list-style: none;
float: left;
width: 150px;
}
#nav>li>ul
{
display: none;
margin-left: -40px;
}
#nav a
{
text-decoration: none;
display: block;
padding: 10px;
background: green;
}
#nav > li > ul > li
{
position:relative;
}
#nav > li > ul > li > ul
{
display:none;
position:absolute;
left:73%;
top:0;
}
#nav > li > ul > li:hover > ul
{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<nav>
<ul id="nav">
<li class="btn-list">
<a href="#">Магазин</a>
<ul class="t">
<li><a href="#">Домашня сторiнка</a></li>
<li class="r">
<a href="#" >Office</a>
<ul class="add-block">
<li><a href="#">Windows</a></li>
<li><a href="#">Windows</a></li>
<li><a href="#">Windows</a></li>
</ul>
</li>
<li><a href="#">Windows</a></li>
</ul>
</li>
<li>
<a href="#">Продукты</a>
<ul>
<li><a href="#">Програмне забезпечення та служби</a></li>
<li><a href="#">Пристрої та Xbox</a></li>
<li><a href="#">Для бiзнесу</a></li>
<li><a href="#">Для IT-фахiвцiв i розробникiв</a></li>
<li><a href="#">Освiта</a></li>
</ul>
</li>
<li><a href="#">Пiдримка</a></li>
</ul>
</nav>
.click()
.