не toggleslide DIV, если другой DIV расширяется ("раздвинулись")

Question

сложно объяснить:

1. я есть "триггер" ДИВ/класс (.trigger)
2. это Div слайдов открытым и показывает содержание, если это нажал (.triggercontainer)
3. кроме того, он скользит открыть подменю, когда он завис. (.submenu)
4. , когда я открыть меню, я хочу, чтобы функция парения быть отключена (поэтому подменю всегда видимы и не делает больше не исчезает, когда я уезжаю на спусковой крючок)
5. , когда я закрыть это Див снова , я хочу, чтобы 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);  
    } 
}); 

довольно хаотично, а?Я настоящий новичок, и я был бы любезный для любого хита :)

EDIT:

вот мой 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);  
  }; 
  

• Attach события в .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); 
      } 
  });