Question

很难解释：

我有一个“触发器”div / class（ .trigger ）
此div滑开并显示内容点击（ .triggercontainer ）
此外，当悬停时，它会滑开一个子菜单。（ .submenu ）
当我打开菜单时，我希望禁用悬停功能（因此，当我离开触发器时，子菜单始终可见并且不再消失）
当我再次关闭这个div时，我希望子菜单接近（并再次开始对悬停动作做出反应）

重要：我有每个类的多个实例，这意味着全局变量可能不起作用（？）。

我的工作内容：

在悬停时显示子菜单
点击
折叠内容并再次隐藏子菜单

什么行不通：

子菜单仍会切换其可见性

这是我打开内容的代码：

$('.trigger').click(function() {
    $(this).find('.triggercontainer').slideToggle(250);     
});

这是用于在内容崩溃时隐藏子菜单的半功能代码

$('.trigger').click(function() {
    state = $(this).data('state');
    if(state == "on" || typeof(state) == "undefined"){
        $(this).find( ".submenu" ).show();
        $(this).data('state','off');
    } else if(state == "off") {
        $(this).find( ".submenu" ).slideUp(50);
        $(this).data('state','on');
    }
});

这是子菜单滑动打开的代码

$('.release').on({
    mouseenter:function(){
        $(this).find( ".submenu" ).slideDown(50);   
    },
    mouseleave:function(){
        $(this).find( ".submenu" ).slideUp(50);    
    }
});

修改

这是我的html结构：

<div class="trigger">
   <div class="menu">
      <div class="submenuheader">(always visible)</div>
      <div class="submenu">(expands when trigger is hovered)</div>
   </div>
<div class="triggercontainer">(expands when trigger is clicked)</div>
</div>

Answer 1

嗨首先请查看此示例Demo Fiddle：

这里我使用这个功能你需要的是根据你想要的HTML结构改变选择器，我建议你一个小提琴：

首先显示和隐藏子菜单的处理程序：

function showsub(){
 $(this).parent().find( ".submenu").slideDown(50); 
}
function hidesub(){
 $(this).parent().find( ".submenu" ).slideUp(50);    
};

将事件附加到.hover()
```
$('.trigger').hover(showsub,hidesub);
```

并制作点击功能，这里我在第一次点击后使用unbind，然后再次使用第二次绑定功能。

$('.trigger').click(function() {
   $(this).parent().find('.triggercontainer').slideToggle(250);
   var state = $(this).data('state');
   if(state === "off"){
     $(this).parent().find( ".submenu" ).show();
     $(this).data('state','on');
     $(this).unbind('mouseenter mouseleave');
   } else {
     $(this).parent().find( ".submenu" ).slideUp(50);
     $(this).data('state','off');
     $(this).on('mouseenter',showsub).on('mouseleave',hidesub);
   }
});

如果展开其他div，则不要切换幻灯片div（“幻灯片打开”）

1 个答案: