带有 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给了我另一种解决方法，简单多了。作为前端网络开发的新手，我错过了单选按钮的组名。现在，它就像一个魅力。我留下了更新的 fiddle 以防万一对像我这样的新手有用 mmenu and radio buttons without code

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

带有 mmenu 的奇怪单选按钮行为

Strange Radio buttons behavior with mmenu

jquery

radio-button

mmenu