Menu icon Foundation
Troubles with dropdown menu

Hi

I don't understand how dropdowns works.. I'd like to click on a link, the menu disapeard and the click trigger is call.. But nothing happens..

For example :

<a href="#" data-dropdown="drop" class="small button dropdown">&nbsp;</a>
<ul id="drop" data-dropdown-content class="f-dropdown">
    <li><a href="#">All</a></li>
    <li><a href="#">None</a></li>
    <li><a class="setallread" href="#">Read</a></li>
    <li><a class="setallunread" href="#">Unread</a></li>
    <li><a class="setallstared" href="#">Starred</a></li>
    <li><a class="setallunstared" href="#">Unstarred</a></li>
</ul>

and in my jquery code i have

$('.setallunread').on('click', function(e) {
    .....
});

dropdownmenu

Hi

I don't understand how dropdowns works.. I'd like to click on a link, the menu disapeard and the click trigger is call.. But nothing happens..

For example :

<a href="#" data-dropdown="drop" class="small button dropdown">&nbsp;</a>
<ul id="drop" data-dropdown-content class="f-dropdown">
    <li><a href="#">All</a></li>
    <li><a href="#">None</a></li>
    <li><a class="setallread" href="#">Read</a></li>
    <li><a class="setallunread" href="#">Unread</a></li>
    <li><a class="setallstared" href="#">Starred</a></li>
    <li><a class="setallunstared" href="#">Unstarred</a></li>
</ul>

and in my jquery code i have

$('.setallunread').on('click', function(e) {
    .....
});
Karl Ward almost 6 years ago

I am not 100% sure what the question is ... You say the click trigger is called? That is correct behavior according to your code I believe ... Do you mean the function inside your click event does not execute? Furthermore, as long as your href is set to #, the links won't do anything more ...

Laurent P almost 6 years ago

Hi n thanx for your help

I just want to use the dropdown menu as a dropdown menu should work... when we click on the link the box is closed and the link is called EVEN if it"s a # (which is a link :) ).. and call the callbacks functions...

Yes I know that a # link but I just need a link to use the jquery click event and close dropdown box.

I found a way to use the menu but it's horrible.

I set a fake url in the and the jquery code look like :

 $('.setallunread').on('click', function(evt) {
    evt.preventDefault();
......
// Hide the listbox
    $(this).closest('ul').removeClass('open').css('left', '-9999px');
  });

Mark Hayes almost 6 years ago

Hey Laurent,

Still a little confused on exactly what might be happening in this case, can you post a link to your site so we can better see what's going on.

Cheers!

Laurent P almost 6 years ago

The only thing I want is to close a dropdown as soon as a link was clicked....

Jesse Matlock over 5 years ago

You can use this as an example, obviously swapping out the specific ID for class and targeting the dropdown from within your JS, but this gives you an idea of how to close it programmatically:

  Foundation.libs.dropdown.close($('#id_of_dropdown_list'));