Jquery Dropdown, stop spread with right click

Navigation
1

I'm using Jquery DropDown: link

In the project issue, there is a code that prevents the menu from closing when clicking as the left button, I would like it not to just close with the right click. In the example below, when clicking inside a link in the dropdown, it remains open but not with the right click, suppose, to open the link in a new tab ...

The code is the one outside the library. 

$("#jq-dropdown-1").on("click",function(event){
    event.stopPropagation();
    $('#jq-dropdown-1').dropdown('show');
});
<link href="https://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><scriptsrc="https://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.min.js"></script>

<a href="#" data-jq-dropdown="#jq-dropdown-1">Dropdown</a>
<div id="jq-dropdown-1" class="jq-dropdown jq-dropdown-tip">
    <ul class="jq-dropdown-menu">
        <li><a href="#">Science</a></li>
        <li><a href="#">Eletronics</a></li>
        <li><a href="#">Pellentesque convallis enim.</a></li>
        <li><a href="#">Internet</a></li>
        <li><a href="#">Business</a></li>
    </ul>
</div>
    
asked by anonymous 15.02.2018 / 15:07

1 answer

1

With plugin features you can not do this. You have to create an event handler that captures the right click and handle classes.

For this I used on contextmenu , which will prevent the menu from being closed in the right click: 

$("#jq-dropdown-1").on("contextmenu", function(event){
    event.stopPropagation();
    
    var a = $("a[data-jq-dropdown='#jq-dropdown-1']");
    
    if(!$(a).hasClass("jq-dropdown-open")){
      $(this).toggle();
      $(a).toggleClass("jq-dropdown-open");
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><linkhref="https://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.min.css" rel="stylesheet"/>
<script src="https://labs.abeautifulsite.net/jquery-dropdown/jquery.dropdown.min.js"></script><ahref="#" data-jq-dropdown="#jq-dropdown-1">Dropdown</a>
<div id="jq-dropdown-1" class="jq-dropdown jq-dropdown-tip">
    <ul class="jq-dropdown-menu">
        <li><a href="#">Science</a></li>
        <li><a href="#">Eletronics</a></li>
        <li><a href="#">Pellentesque convallis enim.</a></li>
        <li><a href="#">Internet</a></li>
        <li><a href="#">Business</a></li>
    </ul>
</div>
    
15.02.2018 / 16:35
error when using waitActivityIndicator, how to solve? background-color does not work when used in "classList.toggle ()"