javascript - 幻灯片导航

Question

我正在尝试制作幻灯片导航。这是我的代码

html

<li>
    <a href="#">Services</a>
   <div class="subcategories">
    <a href="#">Cleaning</a>
  </div>
</li>

子类别 div 是隐藏的。

js

$('li a').hover(function() {
  $(this).next().slideToggle('fast', function() {

   });
});

此代码有效。问题是当鼠标离开 li a 时，子类别 div 消失了。

我想要的是，当用户将 li 指向要显示的子类别 div 时，用户可以单击子导航的某些链接。

Answer 1

请试试这个Demo http://jsfiddle.net/QEkDa/ 或 http://jsfiddle.net/qmrHm/

如果我错过了什么，请告诉我！

希望休息适合事业:)

代码

$(".subcategories").hide();
$('li a').mouseover(function() {
       $(this).next().slideToggle('fast', function() { // <== could use slideDown

    }).mouseout(function() {
        $(".subcategories").slideUp();

    });
});​​

Answer 2

$('li').hover(function(){
    $(this).children('.subcategories').slideToggle('fast', function(){});
});

试试这个，你需要把悬停动作放在 li 上，否则当你将鼠标悬停在 div 上时它会隐藏，因为你现在在 div 上，而不是在了。

随着children()您选择该 li 下属于“子类别”类的节点的操作，但您仍在 li 上，因此它不会隐藏

Answer 3

你使用 a:first

 $('li a:first').hover(function() {
  $(this).next().slideToggle('fast', function() {
  });
});