Нужна помощь в создании выпадающего меню jQuery

Question

Я только начинаю с jQuery. Я хочу сделать простое выпадающее меню ul, чтобы улучшить мое понимание. Основной поток таков:

У ul.menu li ul 'отображается: нет >> при наведении курсора li, получить и сохранить высоту' this 'ul >> установить высоту' this 'ul в 0 >> установить отображение в блок >> animate высота до первоначальной сохраненной высоты

Я знаю, что уже есть несколько отличных плагинов для выпадающих меню, но я действительно хочу свернуть свои собственные, чтобы лучше понять jQuery.

Пока я справился со следующим, очень плохо сделанным (см. Живую версию здесь - http://jsbin.com/eduvi):

---

var $j = jQuery.noConflict();
$j(document).ready(function(){

// Get height of current hidden ul

        $j("ul.menu li").hover(function() { 
          getHeight($j("ul", this).height()); 
        });
// Set height to 0px    

    $j('ul.menu li').hover(function() { 
    $j("ul", this).css({"height":"0px"});
});

// Set display to block 

    $j('ul.menu li').hover(function() { 
    $j("ul", this).css({"display":"block"});
});

// Animate height to stored height  

    $j('ul.menu li').hover(function getHeight(h) { 
    $j('ul:first', this).stop().animate({ "height" : "100%" } , 400 );
});

// Display height of current hidden ul

    function getHeight(h) {
      $j("div.test").text("The height for the hidden ul is " + h + "px."); }
  });

---

Я хотел бы знать, как заставить его использовать сохраненную оригинальную высоту вместо этих 100%.

А во-вторых, я уверен, что все это может быть сведено к нескольким строкам, но на самом деле пока не имею понятия, как это сделать.

Любая помощь очень ценится!

UPDATE: ОК, так что я почти там. Я использовал код, который Marve опубликовал в качестве основы, и работал над остальными. Единственное, что не работает, это то, что мне нужно сбросить высоту скрытого UL, в конце всего, на его первоначальную высоту, и установить для него значение «Нет», чтобы он снова был готов к зависанию. Есть идеи, почему это не сработает?

---

$j('ul.menu > li').hover(
    function() { var ulHeight = $j('ul', this).height(); $j(this).children('ul').css({height: 0}).stop().animate({height: ulHeight}, 400); },
    function() { $j(this).children('ul').stop().animate({height: 0}, 400).css({height: ulHeight, display:none});   }
);

---

Answer 1

Здорово, что вы изучаете jQuery и используете эту задачу для этого. Слава за это!

Я думаю, что вы переборщили решение проблемы. Взгляните на две встроенные функции jQuery, которые помогают убрать часть усилий из решения: slideDown и slideUp . Несомненно, вы найдете много других полезных функций в документации jQuery . Этот фрагмент кода делает большую часть того, что вы уже опубликовали:

$j(document).ready(function() {
    $j('ul.menu > li').hover(
        function() { $j(this).children('ul').stop(true, true).slideDown(); },
        function() { $j(this).children('ul').stop(true, true).slideUp(); }
    );
});

Фрагмент не обрабатывает подменю, которые есть в вашем образце HTML, но, учитывая ваше желание учиться, его реализация не должна быть слишком сложной.

Также см. Документы по stop .

Answer 2

Вот простой совет CSS, чтобы помочь вам:

используйте $ ('ul.menu> li') вместо просто $ ('ul.menu li')

При этом курсор будет нацелен только на меню под элементом списка, над которым вы наводите курсор.