Мне нужна помощь в том, как выбрать только один столбец, когда я наводил курсор на раскрывающееся меню. Он работает, но все элементы подменю сдвигаются вниз. Я хочу только тот, который я наводил на себя, чтобы сделать это, а затем, когда парит следующий, предыдущие закрываются и только следующий остается открытым. Вот мой код HTML/CSS и JS. Благодаря.
<head>
<title>Hover-Dropdown</title>
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<style>
ul{list-style: none;}
.itemList{padding: 0;margin-top: 10px;}
.column{float: left;width: 100px;margin: 0 auto;}
.menu .column a:hover{color:red;}
</style>
<script>
$(document).ready(function(){
$('.menu .column .itemList li').hide();
$('.menu .column .title').hover(function(){
$('.menu .column .itemList li').slideDown('slow');
});
$('.menu .column').mouseleave(function(){
$('.menu .column .itemList li').slideUp('slow');
});
});
</script>
</head>
<body>
<ul class="menu">
<li class="column">
<a class="title" href="#">Title 1</a>
<ul class="itemList">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
<li class="column">
<a class="title" href="#">Title 2</a>
<ul class="itemList">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
<li class="column">
<a class="title" href="#">Title 3</a>
<ul class="itemList">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
</ul>
</body>
Давайте начнем с простого описания вашей структуры HTML. Здесь ничего плохого, но это помогает объяснить проблему.
ul.menu
li.column
a.title
ul.itemList
li
li.column
a.title
ul.itemList
li
...
Теперь давайте взглянем на изменения, внесенные мной в ваш код.
Прежде всего, я изменил селектор hover
от .menu.column.title
до .menu.column
, мы могли бы его сохранить, но код стал красивее, удалив его. Поэтому рассматривайте это изменение как чисто косметическое. :)
Изменение BIG, которое вы увидите, находится на двух строках с помощью slideDown
и slideUp
. Сначала позвольте мне объяснить, что сделал ваш код.
$('.menu .column .itemList li').slideDown('slow');
Всякий раз, когда вы используете $(selector).something()
jQuery начнется в верхней части структуры, которая является вашей DOM, и попытайтесь найти любые соответствующие элементы. В вашем случае это найдет много. Фактически, каждый элемент в подменю соответствует этому описанию. Вот почему каждое меню было показано.
$(this).find('ul li').slideDown('slow');
Изменяя строку на что-то вроде выше, вы фиксируете начальную позицию для поиска на this
(если вы не уверены в this
и JS/jQuery, вы должны попробовать найти хорошие статьи об этом). В этом конкретном случае this
всегда будет ссылкой на конкретный элемент столбца, который зависнет.
резюмировать
$('selector').something(); //Starts a search for the selector at the document root
$(this).find('selector').something(); //Starts a search at "this" element
Подумайте об этом как о глобальном, так и локальном поиске.
Попытайтесь использовать это:
$('.menu .column .title').hover(function(){
$(this).next('.itemList').slideDown('slow');
});
slideDown
должен вызываться для элементов li
. Следовательно, вы должны добавить children()
в ваш код $(this).next('.itemList').children().slideDown('slow');