Menu icon Foundation
Foundation 5 toggle f-dropdown on click?

Hi, I am using Foundation 5 and I am trying to get my dropdown menus to toggle on click. Currently they open on click but I have to click somewhere else on the page to close the menu and I would like to be able to click the same element to close the menu. Thanks!

Here is the code I am using:

<li>
  <span data-dropdown="Services">Services</span>
  <ul id="appmanualNav" class="f-dropdown" data-dropdown-content>
    <li><a href="tires.html" />Tires</a></li>
    <li><a href="brakes.html" />Breaks</a></li>
    <li><a href="engines.html" />Engines</a></li> 
    <li><a href="oil.html" />Oil</a></li>
  </ul>
</li>

f-dropdownFoundation 5toggledropdownmenuclick

Hi, I am using Foundation 5 and I am trying to get my dropdown menus to toggle on click. Currently they open on click but I have to click somewhere else on the page to close the menu and I would like to be able to click the same element to close the menu. Thanks!

Here is the code I am using:

<li>
  <span data-dropdown="Services">Services</span>
  <ul id="appmanualNav" class="f-dropdown" data-dropdown-content>
    <li><a href="tires.html" />Tires</a></li>
    <li><a href="brakes.html" />Breaks</a></li>
    <li><a href="engines.html" />Engines</a></li> 
    <li><a href="oil.html" />Oil</a></li>
  </ul>
</li>
Jared McMorris over 5 years ago

Issue resolved thanks to NikhilKalige: https://github.com/zurb/foundation/issues/4532

Colin Cheverie over 5 years ago

None of the above worked for me, using Foundation 5. So I wrote this jQuery function:

         $(".filter-dropdown").on("click", function(){        
            if( $(this).next().hasClass("open") ) { 
                if( $(this).next().hasClass("clearDropdown") ) { 
                    $(this).next().removeClass("clearDropdown");
                } else {    
                    $(this).next().addClass("clearDropdown");
                }    
            } else {

            }
        });

And a CSS class:

    .clearDropdown { 
        left: -99999px!important;
    }

Not pretty but got it working on a deadline day!

Jared McMorris over 5 years ago

I actually posted on SO before posting here, didn't get any responses though. I'll report back if I find a solution, thanks!

Seamus Leonard over 3 years ago

 

Yeah this is not working on 5.2.1

 

this snippet seems to fix it though.

 

$(document).ready(function() {

  $(".f-dropdown > li").click(function(){

      $(this).closest("ul").removeClass("open").removeAttr("style");

  });

});

Abby Jones over 5 years ago

I'm having the same problem. I posted a question here but haven't gotten a reply that helped me yet. Just posted on StackOverflow....

http://stackoverflow.com/questions/21949643/foundation-5-dropdown-button-opening-but-not-closing