prevent mmenu close on click on page

960 Views Asked by At

I have one mmenu instance. The default behaviour is that it closes when I click outside of the menu. How can I prevent this behaviour? To force the menu closure I want to use only a predisposed button (already working)

------------------ ADD Some details --------

My mmenu instance is as below

<nav id="listPanel">
            <ul>
                <li id="closeButtonLi"><span id="panelButtonClose" class="glyphicon glyphicon-chevron-right"> Chiudi</span></li>
                <!--<li style="padding:10px"><input type="text" class="form-control" placeholder="Aggiungi atleta"></li>-->
                <li id="athSelectorLi" style="padding:10px">
                    <input id="athSelector" style="width:70%;"/>
                    <img id="plusButton" style="width:35px;height:auto;cursor:pointer;margin-left:12px;" src="../../../docsUI/images/common/add.png"/>
                    <img id="removeButton" style="width:35px;height:auto;cursor:pointer;margin-left:7px;" src="../../../docsUI/images/common/remove.png"/>
                </li>
                <li >
                    <table id="athTable" class="hover compact" width="95%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>markerColor</th>
                                <th>bib</th>
                                <th>name</th>
                                <th>avgSpeed</th>
                                <th>locate</th>
                                <th>remove</th>
                            </tr>
                         </thead>
                         <tbody>
                        </tbody>
                    </table>
                </li>   
            </ul>
        </nav>  



     $(document).ready(function() {
        $("#listPanel").mmenu({
        "classes": "mm-light",
        "offCanvas": {
              "zposition": "front",
              "position": "right"
               }
        }
        });  

        $("#panelButton").click(function() {
             $("#listPanel").trigger("open.mm");
              });
        $("#panelButtonClose").click(function() {
             $("#listPanel").trigger("close.mm");
              });
        }); 

What I need is to close the #listPanel menu only using the close button

<li id="closeButtonLi"><span id="panelButtonClose" class="glyphicon glyphicon-chevron-right"> Chiudi</span></li>

With current implementation, the button works as expected, but the menu closes also when I click outside the menu in the remaining part of the page. I want to avoid exactly it (close the menu clicking on the page as is the default behaviour as described in http://mmenu.frebsite.nl/tutorial/open-and-close-the-menu.html)

I searched both on Stack Overflow current answers and on website documentation, but I did not find any solution. The only API present is the onClick but it is not relevant for my needs.

2

There are 2 best solutions below

0
On

This will remove div which will prevent close mmenu

$('#mm-blocker').remove();

better than unbind mousedown

0
On
$('#mm-blocker').unbind('mousedown')