Question

我附上解释问题的图像：由于单选按钮的行为，假设Item1和Item2是互斥的。但是他们不会这样做，因为两者都经过检查，加上变得更糟，我无法逆转它，即：如果我想取消选中一些项目，则没有任何反应。他们保持检查。我不知道这是否是正确的语法。

这是代码中有意义的部分，简单如图所示，添加了正确的库和样式表文件，否则无法显示。谢谢你的回复。

<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 and radio buttons without code

有用

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

奇怪的单选按钮行为与mmenu

2 个答案: