Как выбрать только один столбец при наведении на него в раскрывающемся меню JQuery?

0

Мне нужна помощь в том, как выбрать только один столбец, когда я наводил курсор на раскрывающееся меню. Он работает, но все элементы подменю сдвигаются вниз. Я хочу только тот, который я наводил на себя, чтобы сделать это, а затем, когда парит следующий, предыдущие закрываются и только следующий остается открытым. Вот мой код 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>

  • 1
    как то так ?
  • 0
    да, это то, что я хотел, не могли бы вы сказать мне, в чем именно проблема? Спасибо за помощь.
Показать ещё 1 комментарий
Теги:
hover
drop-down-menu

2 ответа

0
Лучший ответ

Давайте начнем с простого описания вашей структуры 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

Подумайте об этом как о глобальном, так и локальном поиске.

Поделиться
  • 0
    Спасибо за помощь и детали.
0

Попытайтесь использовать это:

            $('.menu .column .title').hover(function(){
                    $(this).next('.itemList').slideDown('slow');
            });
Поделиться
  • 0
    slideDown должен вызываться для элементов li . Следовательно, вы должны добавить children() в ваш код $(this).next('.itemList').children().slideDown('slow');

Ещё вопросы

Сообщество Overcoder
Наверх
Меню