Пользовательский раскрывающийся список в JQuery

Question

Я смотрю на выпадающие плагины jquery. Никто из них не работает так, как мне хотелось бы.

Мне нужно написать простой скрипт, который по сути является раскрывающимся меню.

Существует простая серия li с уникальными идентификаторами, которые соответствуют классу div (не дочернему или родительскому) Я бы хотел, чтобы подменю скользило вниз по основному меню li.

Итак, HTML будет выглядеть так:

<ul>
   <li id="number1"><a href="#">Link</a></li>
   <li id="number2"><a href="#">Link</a></li>
</ul>
<div class="number1">
Div stuff...
</div>
<div class="number2">
More stuff...
</div>

У меня небольшие проблемы, и я очень признателен за помощь!

Answer 1

Назначьте еще один класс CSS для подменю, например,

<div class="number1 isSubMenu">
Div stuff...
</div>
<div class="number2 isSubMenu">
More stuff...
</div>

и затем следующий jQuery должен сделать это (учитывая, что вы выполнили всю работу CSS, необходимую для позиционирования подменю):

$("li > a").bind("mouseenter",function(){
    var _li=$(this).parent();
    $(".isSubMenu").slideUp("fast");
    $("."+_li.attr("id")).stop().slideDown("slow");
});

Приведенный выше код не оптимизирован, но он должен дать вам четкое представление о том, как это делается ....

РЕДАКТИРОВАТЬ: согласно вашему комментарию, есть немного работы, связанной с javascript, а также css, чтобы получить идеальную рабочую систему выпадающего меню. С помощью приведенного выше кода вам необходимо переместить подменю, чтобы они были дочерними элементами элементов LI ... поэтому позже вы можете связать событие mouseleave с LI, чтобы скрыть его дочерние элементы. И поскольку это mouseleave, а не mouseout, оно будет работать, когда при отпускании мыши и LI, и его дочернее подменю ....

Если вам нужно более полное решение, попробуйте , это и , это ... они в основном используют CSS, но используют javascript для деградации до старых браузеров. Быстрое закрашивание кода в обоих этих проектах должно дать вам четкое представление о том, как это делается ...

Answer 2

Вам понадобится вызов $ (this) .attr ('id') внутри функций наведения, чтобы получить правильный идентификатор элемента. Я предполагаю, что div тоже будут скрыты, как в моем примере ниже.

<script>

        $(document).ready(
        function() {
                $('ul li').hover(
                        function() {
                                var target = $(this).attr('id');
                                $("." + target).slideDown('slow');
                        },
                        function() {
                                var target = $(this).attr('id');
                                $("." + target).slideUp('slow');
                        }
                );
        });

</script>

<ul>
   <li id="number1"><a href="#">Link</a>
    <div class="number1" style="display:none;">
    Div stuff...
    </div>
   </li>
   <li id="number2"><a href="#">Link</a>
    <div class="number2" style="display:none;">
    More stuff...
    </div>
</li>
</ul>

Answer 3

Вы можете попробовать что-то вроде:

<script language="javascript">
    $(document).ready(function() {
        var id = $(this).attr("id");

        $("#Links li").hover(function() {
            $("." + id).slideDown("slow");
        }, function() {
            $("." + id).slideUp("slow");
        });
    });
</script>

<ul id="Links">
    <li id="number1"><a href="#">Link</a></li>
    <li id="number2"><a href="#">Link</a></li>
</ul>

<div class="number1">
    Div stuff...
</div>
<div class="number2">
    More stuff...
</div>