don't toggleslide div if other div is expanded ("slid open")

Question

complicated to explain:

1. i have a "trigger" div / class (.trigger)
2. this div slides open and shows content if it is clicked (.triggercontainer)
3. additionally, it slides open a submenu when it is hovered. (.submenu)
4. when i open the menu, i want the hover function to be disabled (so the submenu is always visible and does no longer disappear when i leave the trigger)
5. when i close this div again, i want the submenue to close to (and start reacting to the hover-action again)

important: i have multiple instances of each class, which means that global variables probably wont work (?).

---

what i get to work:

• showing the submenu on hover
• expanding the content (triggercontainer) on click
• collapsing the content and hiding the submenue on click again

what doesn't work:

• submenu still toggles its visibility if i hover the expanded content

---

here's my code for sliding the content open:

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

here's the half-functional code for hiding the submenue if content is collapsed

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

here's the code for the submenu to slide open

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

pretty chaotic, eh? i'm a real novice and i'd be gracious for any hit :)

EDIT:

here's my html structure:

<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

Hi First at all Check this example Demo Fiddle :

Here I use this functions all you need is change your selectors according to the HTML structure you want, I propose you one in the fiddle:

• First the handlers to show and hide the submenu:

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

• Attach the events to the .hover()

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

• And make the click function, here I use unbind after the first click and after the second bind again the functions.

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