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() {

   });
});

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

我想要的是当用户指向li时子类别div显示，以便用户能够点击子导航的某个链接。

Answer 1

请尝试演示 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

你使用：第一个

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

幻灯片导航

3 个答案: