i76 i76 - 4 months ago 13
jQuery Question

JS- to click another button and close a menu on click

I am building a menu in Foundation 6 and for the lack of better solution I am trying to make the script click on the Moue button once of the menu items was clicked.

<div data-sticky-container>
<div class="small-12 sticky" data-sticky data-options="stickyOn: small" data-margin-top="0">

<div class="title-bar" data-responsive-toggle="responsive-topbar" data-hide-for="medium">
<a href="#" class="menu-text show-for-small-only">BB</a>
<button class="menu-icon float-right" type="button" data-toggle></button>
</div>

<div class="top-bar" id="responsive-topbar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text hide-for-small-only">AA</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="dropdown menu" data-dropdown-menu>
<li><a href="#" class="clicked">One</a></li>
<li><a href="#" class="clicked">Two</a></li>
<li><a href="#" class="clicked">Three</a></li>
</ul>
</div>
</div>
</div>
</div>

<script>

$('.clicked').click(function(evt) {
$('.menu-icon').click();
});

</script>


Is this script targeting the right element?

<script>

$('.clicked').click(function(evt) {
$('.menu-icon').click();
});

</script>


Any suggestions on how to fix this?

Answer

This code will set the .top-bar element to display: none;

$('.dropdown li a').click(function() {
 $('.top-bar').css('display', 'none');
});