如果其他分區擴展不toggleslide DIV（ 「滑開」）

Question

複雜的解釋：

1. 我有一個 「觸發」 DIV /類（.trigger）
2. 該div幻燈片打開並顯示的內容，如果它是點擊（.triggercontainer）
3. 附加地，滑動打開的子菜單時，它是徘徊。 （.submenu）
4. 當我打開菜單，我想懸停功能被禁用（這樣子菜單總是可見的和不不再消失，當我離開扳機）
5. 當我關閉這個再次的div ，我想submenue接近（並重新開始反應，懸停動作）

重要：我有每個類，這意味着多個實例，全局變量可能無法正常工作（？）。

---

我去上班：

• 顯示懸停
• 擴張上點擊
• 內容（triggercontainer）摺疊內容的子菜單和隱藏submenue再次點擊

什麼行不通：

• 子仍切換其可見性，如果我將鼠標懸停在擴展的內容

---

這裏是我的滑內容開放代碼：

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