mmenu的奇怪单选按钮行为

Question

我附上一张解释该问题的图像：由于单选按钮的行为，假定Item1和Item 2是互斥的。 但是，由于它们都一直处于检查状态，所以它们的行为不一样，而且更糟的是，我无法撤消它，即：如果我想取消选中某些项目，则什么也不会发生。 他们一直检查。 我不知道这是否是正确的语法。

这是代码中有意义的部分，非常简单，如您在图像中看到的那样，添加了正确的适当的库和样式表文件，否则无法显示。 感谢您的答复。

<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>

我正在应用文档中描述的内容： http : //mmenu.frebsite.nl/documentation/addons/toggles.html

提前致谢！

Answer 1

我的建议是处理插件内的广播事件：

 $(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> 

Answer 2

mmenu的创建者FredE给了我另一种解决方法，简单得多。 作为前端Web开发的新手，我错过了单选按钮的组名。 现在，它就像一种魅力。 我离开了更新的小提琴，以防万一对像我这样的新手mmenu和没有代码的单选按钮有用

<input type="radio" name="Radios" class="Check" />