链接jQuery元素以在悬停时显示

时间:2013-04-02 12:38:24

标签: jquery list menu jquery-hover

是否有一种简单的方法来链接jquery元素,用于悬停。我在http://jsbin.com/useviz/3/edit处有jsbin我基本上已经拥有它,当你将鼠标悬停在ul上时它不会关闭当你将鼠标移到元素上方或者下一个元素时会出现问题元件。原来的ul不隐藏。这可能听起来令人困惑,但你会看到你是否看到上面的例子。

2 个答案:

答案 0 :(得分:2)

您无需检查要隐藏的元素是否存在,您可以根据需要隐藏它。我已将$(".sub_menu").hide(700);添加到每个鼠标悬停功能中,它可以正常工作!见http://jsbin.com/useviz/6/

答案 1 :(得分:1)

这样的事,

现场演示here

$(document).ready(function () {

    $("#servicebutton").mouseenter(function () {
        $('.sub_menu').hide();
        $('.sub_menu1').show(700);
    });

    $('.sub-menu1').mouseleave(function () {
         $('.sub_menu1').hide(700);
    });

    $("#packagebutton").mouseenter(function () {
         $('.sub_menu').hide();
         $('.sub_menu2').show(700);
    }); 

    $('.sub-menu2').mouseleave(function () {
         $('.sub_menu2').hide(700);
    });

    $("#productbutton").mouseenter(function () {
       $('.sub_menu').hide();
       $('.sub_menu3').show(700);
    });

    $('.sub-menu2').mouseleave(function () {
       $('.sub_menu3').hide(700);
    });

  /* catch-all for submenus */
  $('.sub_menu').mouseleave(function(){
      $(this).hide(700);
  });
});