Question

I have built a mega menu, where when you click on the nav link it opens, and when you click again it closes (that works correctly). There is also a close link inside that should toggle it closed when clicked, However in IE, it just reopens it everytime it is clicked. It works correctly in Firefox, Chrome and Safari.

It menu has to open and close with clicks because some of the computers use touch screens. Any ideas?

Here is the stripped down code (showing only one nav link):

JQuery:

$(document).ready(function(){
 $('div.megamenu> div').hide();  

 /* This toggles the nav link open and closed --works correctly */
 $(".Benefits-Down").click(function() {
      $(".Benefits-Dropped").slideToggle("Fast");
  });

/*This is suppose to also toggle it closed, but it doesn't work in IE*/
  $(".Benefits-Close").click(function() {
            $(".Benefits-Dropped").slideToggle("Fast");
  });

});

HTML:

<div class="megamenu">
    <ul>
    <li class="Benefits-Down">Link goes here /*removed so question would post */</li>
 <div class="Benefits-Dropped">
         Links                          
        <div class="Benefits-Close">
                   <a href="#">Close</a>        
               </div>
         </div>
      </ul>
</div>

Answer 1

It’s because you have invalid markup, a <div> isn’t a valid child of a <ul> and IE doesn’t really tolerate it, either place it inside the <li> like this:

<div class="megamenu">
  <ul>
    <li class="Benefits-Down">Link goes here /*removed so question would post */
      <div class="Benefits-Dropped">
        Links                          
        <div class="Benefits-Close">
          <a href="#">Close</a>        
        </div>
      </div>
    </li>
  </ul>
</div>

Or outside the <ul>, like this:

<div class="megamenu">
  <ul>
    <li class="Benefits-Down">Link goes here /*removed so question would post */</li>
  </ul>
  <div class="Benefits-Dropped">
    Links                          
    <div class="Benefits-Close">
      <a href="#">Close</a>        
    </div>
  </div>
</div>