解決 - 與mmenu奇怪的單選按鈕行爲

我附上一個圖像解釋問題：它是由於單選按鈕的行爲應該是Item1和Item2是互斥的。但是他們並沒有這樣做，因爲兩者都經過檢查，加上更糟糕的是，我不能將其改變，即：如果我想取消選中某個項目，則什麼都不會發生。他們繼續檢查。我不知道這是否是正確的語法。解決 - 與mmenu奇怪的單選按鈕行爲

這是代碼的有意義的部分，它很簡單，就像您在圖像中看到的那樣，添加了適當的庫和樣式表文件，否則無法顯示。感謝您的回覆。

<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

提前感謝！

來源

2016-01-14 rossig7

的URL轉到404 – DinoMyte

感謝advicing它我會編輯自己的帖子情況可能是新手，是有用的。 – rossig7

@DinoMyte它已被存檔，現在鏈接正在工作 – rossig7

我的建議是處理插件裏面的無線電事件：

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

來源

2016-01-14 21:43:53 gaetanoM

嗨，謝謝！ @gaemaf這似乎是一個很好的解決方法，但作爲JS/CSS3的新手，我需要問你，如何處理不同的項目名稱，如A，B而不是Item1和Item2。另外，我不希望這種解決方案可能干擾其他子菜單項的行爲。這種解決方案可能嗎？謝謝！ – rossig7

第二個問題，是否應該以這種方式處理？因爲它沒有記錄。沒有此解決方法，檢查按鈕就可以正常工作。我不知道是否因爲一個錯誤。你有沒有經歷過？再次感謝！ – rossig7

如果您深入瞭解該插件，您會發現問題的解決方案正是如此。所以沒有解決方法。當然，你可以改進代碼，無論如何我會回答你的問題，我希望。如果沒關係，解決你的問題，你可以接受和upvote？ – gaetanoM

的mmenu創家Frede給了我另一種方式來解決這個問題，要簡單得多。作爲前端Web開發的新手，我錯過了單選按鈕的組名稱。現在，它就像一個魅力。我離開了更新的小提琴只是像我mmenu and radio buttons without code

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

來源

2016-01-15 19:13:27 rossig7

解決 - 與mmenu奇怪的單選按鈕行爲

回答

相關問題