jquery - 如果其他 div 已展开 ("slid open"，则不要切换 div)

Question

复杂的解释:

1. 我有一个“触发器”div/类 (.trigger)
2. 此 div 在被点击时滑动打开并显示内容 (.triggercontainer)
3. 此外，当它被悬停时，它会滑动打开一个子菜单。 (.submenu)
4. 当我打开菜单时，我希望禁用悬停功能(因此子菜单始终可见并且在我离开触发器时不再消失)
5. 当我再次关闭此 div 时，我希望子菜单关闭(并再次开始对悬停操作使用react)

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

---

我开始工作的内容:

• 悬停时显示子菜单
• 在点击时扩展内容 (triggercontainer)
• 再次点击时折叠内容并隐藏子菜单

什么不起作用:

• 如果我将鼠标悬停在展开的内容上，子菜单仍会切换其可见性

---

这是我滑动打开内容的代码:

$('.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 结构更改你的选择器，我建议你在 fiddle 中使用一个:

• 首先是显示和隐藏子菜单的处理程序:

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

• 将事件附加到 .hover()

  $('.trigger').hover(showsub,hidesub);
  

• 并创建点击功能，这里我在第一次点击后使用unbind，在第二次点击后再次绑定(bind)这些功能。

  $('.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);
     }
  });