奇怪的单选按钮行为与 mmenu答案

【问题标题】：Strange Radio buttons behavior with mmenu奇怪的单选按钮行为与 mmenu
【发布时间】：2016-01-14 20:40:38
【问题描述】：

我附上一张图片来解释这个问题：由于单选按钮的行为，假设 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

提前致谢！

【问题讨论】：

网址转到 404。
感谢您的建议，我将编辑我的帖子。
@DinoMyte 它已经过编辑，链接现在可以使用
你能发布你正在使用的脚本代码吗？
@DinoMyte 没有脚本，因为一切都在 .js 和 .ccs 库文件中。简单的唯一限制是以我在 html 代码中所做的方式命名一个类。

标签： jquery radio-button mmenu

【解决方案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>

【讨论】：

您好，谢谢！ @gaemaf 这似乎是一个很好的解决方法，但是作为 JS/CSS3 的新手，我需要问你，如何处理不同的项目名称，比如 A、B 而不是 Item1 和 Item2。另外，我不希望这个解决方案会干扰其他子菜单项的行为。这个解决方案有可能吗？谢谢！
第二个问题，应该这样处理吗？因为它没有记录。如果没有此解决方法，复选按钮可以正常工作。不知道是不是因为bug。你有同样的经历吗？再次感谢！
如果您深入了解该插件，您会发现您的问题的解决方案是这样的。所以没有解决方法。当然，您可以改进代码，我希望无论如何我都回答了您的问题。如果没问题并解决了您的问题，您可以接受并投票吗？
谢谢！ @gaemaf，我感到困惑是因为正如我在 mmenu 文档中所理解的那样，它相当简单。例如，如果我应用我的代码但使用复选按钮而不是单选按钮，它们会按预期工作而无需任何代码行。就这么简单。似乎与元素绑定的类就足够了。单选按钮并非如此。也许我误解了文档。至于我的回答，我猜我没有足够的信用来评估它。

【解决方案2】：

mmenu 创建者 FredE 给了我另一种解决方法，更简单。作为前端 Web 开发的新手，我错过了单选按钮的组名。现在，它就像一个魅力。我留下了更新的小提琴，以防万一对像我这样的新手有用mmenu and radio buttons without code

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

【讨论】：