jqueryradio-buttonmmenu

Strange Radio buttons behavior with mmenu

I attach an image explaining the issue: it is supposed that Item1 and Item 2 are mutually exclusive due to the radio buttons behavior. But they don't behave as such since both kept checked, plus to get it worse, I can't reverse it, ie: if I want to uncheck some item, nothing happens. They kept checked. I don't know if this is the correct syntax.

This is the meaningful part of the code which is ver simple as you can see in the image, the proper proper libraries and style sheets files are added, otherwise this couldn't to be displayed. Thanks for your response.

enter image description here

<li><a href="/">Home</a></li>
                <li>
                    <span>
                        <a href="/item1/">Item1</a>     
                        <input type="radio" class="Check" />     
                     </span>                         
                </li>
                <li>    
                    <span>
                        <a href="/item2/">Item2</a>
                        <input type="radio" class="Check" />                                                         
                     </span>                         
                </li>

I am applying exactly what is described in the documentation: http://mmenu.frebsite.nl/documentation/addons/toggles.html

Thanks in advance!

Solution

  • My proposal is to handle the radio events inside the plugin:

    $(function () {
  $("#menu").mmenu({
  }).on( 'click', 'a[href^="/item"]', function() {
    var radio = $(this).closest('li').find(':radio');
    var label = $('label[for="'+ radio.attr('id') +'"]');
    radio.prop('checked', !radio.prop('checked'));
    if (radio.is(':checked')) {
      label.show();
    } else {
      label.hide();
    }
    var par = $(this).closest('ul');
    par.find(':radio').not(radio).prop('checked', false);
    par.find('label.mm-check').not('label[for="'+ radio.attr('id') +'"]').hide();
    return false;
   }
  );

  $("#menu").data( "mmenu").open();
  $("#menu").find('.mm-check').hide();
});
    .mm-menu {
  background: #099 !important;
}
.mm-navbar {
  border: none;
}
.mm-search {
  padding: 30px 25px 0 25px;
}
.mm-search input {
  background: none !important;
  border: 1px solid rgba( 255, 255, 255, 0.8 );
  height: 35px;
}
.mm-listview li > a {
  color: rgba( 255, 255, 255, 0.8 );
}
.mm-listview > li > a {
  font-size: 16px;
  padding: 15px 10px 15px 40px;
}
.mm-listview > li > a:hover {
  background: rgba( 255, 255, 255, 0.8 );
  color: #099;
}
.mm-listview .mm-inset {
  padding-left: 50px;
}
.mm-listview .mm-inset a:hover {
  text-decoration: underline;
}
    <script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.5.3/core/js/jquery.mmenu.min.all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.5.3/core/css/jquery.mmenu.all.css" type="text/css" rel="stylesheet"/>


<nav id="menu">
    <ul>
        <li><a href="/">Home</a></li>
        <li>
            <span>
                <a href="/item1/">Item1</a>
                <input type="radio" class="Check" />
             </span>
        </li>
        <li>
            <span>
                <a href="/item2/">Item2</a>
                <input type="radio" class="Check" />
             </span>
        </li>
    </ul>
</nav>