Separate button triggers dropdown menu

[lookingwill]

Hello,

Due to client needs, they wish to have a button that exists on the same page that triggers the dropdown menu. I got the button to open the menu using the following jQuery:

$('#button').click(function(){
     $('#list-item).toggleClass('open');
 });

But then it breaks the rest of the submenus existing in that submenu. I was trying to implement the itemActivate method, but I must be doing something wrong as nothing happens on the page. My code is as follows:

Markup:

<ul id="main-menu">
     <li id="list-item">
          <a href="#">Option</a>
          <ul class="drowdown-menu">
               <li>
                    <a href="#">Submenu 1</a>
                    <ul class="dropdown-menu">
                         <li>Submenu Item</li>
                    </ul>
               </li>
          </ul>
     </li>
</ul>

Javascript:

$('#button').on('click', function(){
     $('#main-menu').smartmenus('itemActivate', $('#list-item > a'));
});

Is this the right method to use? Am I implementing it correctly?
Thanks in advance for your help.

[admin]

Hi,

Yes, this is the method but if the option hideOnClick is set to true (and it is by default), the sub menu will be reset immediately after it is activated since the button click bubbles to the document and there the hideOnClick hander is executed. You can avoid this, for example, by calling the method asynchronously with a short timeout like this:

$('#button').on('click', function() {
     setTimeout(function() {
          $('#main-menu').smartmenus('itemActivate', $('#list-item > a'));
     }, 1);
});

Let me know if you still have any troubles.

[Author]

Posts