toggleClass 在 each 函數中沒有按預期工作
[英]toggleClass not working as expected inside an each function
問題描述
我創建了一個帶有下拉菜單的簡單導航。 我遇到的唯一問題是，當單擊具有向下箭頭圖標的鏈接（如 link1 link2 link3）時，單擊具有向下箭頭圖標的另一個鏈接時它不會旋轉。 我不確定為什么會這樣。 請幫我。 先感謝您！
$(document).ready(function() { $('.dropdown').each(function() { var $dropdown = $(this); $("a.dropdown-toggle", $dropdown).click(function(e) { e.preventDefault(); $(".dropdown-toggle i", $dropdown).toggleClass('rotate-arrow'); $dropdownMenu = $(".dropdown-menu", $dropdown); $dropdownMenu.toggle(); $(".dropdown-menu").not($dropdownMenu).hide(); }); }); });
.rotate-arrow { transform: rotate(180deg); } .dropdown-menu { display: none; } .show-dropdown-menu { display: block; } .dropdown { margin-bottom: 20px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <script src="https://kit.fontawesome.com/a076d05399.js"></script> </head> <body> <nav> <ul class="menu nav"> <li class="expanded dropdown"> <a href="" class="dropdown-toggle">Link 1 <i class="fas fa-chevron-down"></i></a> <ul class="menu dropdown-menu"> <li> <a href="#">link 1 inner 1</a> </li> <li> <a href="#">link 1 inner 2</a> </li> </ul> </li> <li class="expanded dropdown"> <a href="" class="dropdown-toggle">Link 2 <i class="fas fa-chevron-down"></i></a> <ul class="menu dropdown-menu"> <li> <a href="#">link 2 inner 1</a> </li> <li> <a href="#">link 2 inner 2</a> </li> </ul> </li> <li class="expanded dropdown"> <a href="" class="dropdown-toggle">Link 3 <i class="fas fa-chevron-down"></i></a> <ul class="menu dropdown-menu"> <li> <a href="#">link 3 inner 1</a> </li> <li> <a href="#">link 3 inner 2</a> </li> </ul> </li> </ul> </nav> </body> </html>
2 個解決方案
解決方案1
1 已采納 2019-12-16 01:20:13
單擊另一個鏈接時它不會旋轉
因為您沒有任何代碼來刪除rotate-arrow類 - 添加：
$(".dropdown-toggle i").removeClass("rotate-arrow");
或者，更具體地說，要保持與菜單切換相同的格式：
var $dropdowntoggle = $(".dropdown-toggle i", $dropdown)
$dropdowntoggle.toggleClass('rotate-arrow');
$(".dropdown-toggle i").not($dropdowntoggle).removeClass("rotate-arrow");
更新的片段：
$(document).ready(function() { $('.dropdown').each(function() { var $dropdown = $(this); $("a.dropdown-toggle", $dropdown).click(function(e) { e.preventDefault(); var $dropdowntoggle = $(".dropdown-toggle i", $dropdown) $dropdowntoggle.toggleClass('rotate-arrow'); $(".dropdown-toggle i").not($dropdowntoggle).removeClass("rotate-arrow"); var $dropdownMenu = $(".dropdown-menu", $dropdown); $dropdownMenu.toggle(); $(".dropdown-menu").not($dropdownMenu).hide(); }); }); });
.rotate-arrow { transform: rotate(180deg); } .dropdown-menu { display: none; } .show-dropdown-menu { display: block; } .dropdown { margin-bottom: 20px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <script src="https://kit.fontawesome.com/a076d05399.js"></script> </head> <body> <nav> <ul class="menu nav"> <li class="expanded dropdown"> <a href="" class="dropdown-toggle">Link 1 <i class="fas fa-chevron-down"></i></a> <ul class="menu dropdown-menu"> <li> <a href="#">link 1 inner 1</a> </li> <li> <a href="#">link 1 inner 2</a> </li> </ul> </li> <li class="expanded dropdown"> <a href="" class="dropdown-toggle">Link 2 <i class="fas fa-chevron-down"></i></a> <ul class="menu dropdown-menu"> <li> <a href="#">link 2 inner 1</a> </li> <li> <a href="#">link 2 inner 2</a> </li> </ul> </li> <li class="expanded dropdown"> <a href="" class="dropdown-toggle">Link 3 <i class="fas fa-chevron-down"></i></a> <ul class="menu dropdown-menu"> <li> <a href="#">link 3 inner 1</a> </li> <li> <a href="#">link 3 inner 2</a> </li> </ul> </li> </ul> </nav> </body> </html>
解決方案2
1 2019-12-16 01:43:59
壞方法！
CSS 表示層疊樣式表
$('.dropdown a').click(function( event ) { event.preventDefault(); let $_LI = $(this).closest('li'); if (!$_LI.hasClass('selected')) { $('.selected').removeClass('selected'); } $_LI.toggleClass('selected'); });
nav ul { list-style: none;} li > ul { display: none; } li.selected > a > i { transform: rotate(180deg); } li.selected > ul { display: block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://kit.fontawesome.com/a076d05399.js"></script> <nav> <ul class="menu nav"> <li class="expanded dropdown"> <a href="" class="dropdown-toggle">Link 1 <i class="fas fa-chevron-down"></i></a> <ul class="menu dropdown-menu"> <li> <a href="#">link 1 inner 1</a> </li> <li> <a href="#">link 1 inner 2</a> </li> </ul> </li> <li class="expanded dropdown"> <a href="" class="dropdown-toggle">Link 2 <i class="fas fa-chevron-down"></i></a> <ul class="menu dropdown-menu"> <li> <a href="#">link 2 inner 1</a> </li> <li> <a href="#">link 2 inner 2</a> </li> </ul> </li> <li class="expanded dropdown"> <a href="" class="dropdown-toggle">Link 3 <i class="fas fa-chevron-down"></i></a> <ul class="menu dropdown-menu"> <li> <a href="#">link 3 inner 1</a> </li> <li> <a href="#">link 3 inner 2</a> </li> </ul> </li> </ul> </nav>
jQuery - toggleClass + slideToggle無法按預期工作
[英]jQuery - toggleClass + slideToggle not working as expected
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.