Question

我在我的一个网站上有一个菜单，我试图将其从.click转换为.hover。我将.click更改为.hover并且它适用于悬停，但我想要添加的是当您离开它时缩回菜单的内容。

这是原始代码的片段：

(function ($) {
$(document).ready(function(){
    $("#block-menu-menu-tea-menu").hide();
    $("#block-menu-menu-teawares").hide();
    $("#block-menu-menu-teawares-china").hide();
    $("#block-menu-menu-japan-teawares").hide();
    $("#block-menu-menu-tea-countries").hide();
    $("#block-menu-menu-tea-blends").hide();
    $("#block-menu-menu-tea-types").hide();
    $("#main-menu .menu-1877 a").show();
    $("#main-menu .menu-1885 a").show();

    $('#main-menu .menu-2397 a').click(function() { //Tea by Country
        $("#block-menu-menu-tea-countries").slideToggle();
        $("#block-menu-menu-teawares").hide();
        $("#block-menu-menu-tea-types").hide();
        $("#block-menu-menu-tea-blends").hide();
        $("#block-menu-menu-japan-teawares").hide();
        $("#block-menu-menu-teawares-china").hide();
        return false;
    });

我想要做的是将点击转换为悬停。不是100％确定如何做到这一点。任何帮助将非常感激！

谢谢！

Answer 1

从jQuery的网站上看，悬停功能可以接受两个回调，一个用于mouseenter，另一个用于mouseleave。

$( "li" ).hover(
  function() {
    // do stuff when mouse is over the element
  }, function() {
    // do stuff when mouse is moved away from element
  }
);

Answer 2

第一次隐藏元素的调用可以最小化到

使用带选择器的启动^ = Attribute starts with

$("[id^=block-menu-menu-]").hide();
$("#main-menu .menu-1877 a").show();
$("#main-menu .menu-1885 a").show();

对于你的方法，其他人说使用handlerOut的回调

$('#main-menu .menu-2397 a').click(function() { //Tea by Country
        $("#block-menu-menu-tea-countries").slideToggle();
        $("[id^=block-menu-menu-]").not("#block-menu-menu-tea-countries").hide();
        return false;
    },
  function(){
     //Callback handler out
     $("#block-menu-menu-tea-countries").slideToggle();
   }
);

将jquery菜单从单击更改为悬停

2 个答案: