如果其他 div 展开（“滑动打开”），则不要切换滑动 div

Question

解释起来很复杂：

1. 我有一个“触发器”div / 类 (.trigger)
2. 如果点击（.triggercontainer），此 div 会滑动打开并显示内容
3. 此外，当它悬停时，它会滑动打开一个子菜单。 (.submenu)
4. 当我打开菜单时，我希望禁用悬停功能（因此子菜单始终可见，并且在我离开触发器时不再消失）
5. 当我再次关闭此 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);
     }
  });