jQuery 點擊，添加 class 但如果 class 已經存在，也刪除

Question

我有一個導航菜單，需要通過點擊而不是懸停來觸發。 單擊鏈接時，將向父li添加一個.open class 。 如果該父級已經擁有.open class，那么它將被刪除。 如果單擊另一個鏈接，它也會被刪除。 到目前為止，我可以在單擊同級時添加 class 並在單擊同級時將其刪除，但在它已經.open時不會刪除。

我嘗試添加一個hasClass條件，但這也不起作用。 似乎每次單擊它都會重新運行 function ，因此忽略 hasClass 條件。

任何人都可以提供幫助嗎？ 我嘗試toggleClass ，但沒有奏效。

 $('li a').on('click', function() { $('li a').parent().removeClass('open'); $(this).parent().addClass('open'); });

 ul { list-style: none; } li { display: inline-block; padding: 10px; }.open { background-color: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <ul> <li> <a href="#">Item 1</a> </li> <li> <a href="#">Item 1</a> </li> </ul> </nav>

Answer 1

要執行您需要的操作，您可以在單擊元素時在父li上使用toggleClass() 。 要從所有其他li元素中刪除 class ，您可以使用removeClass()和not()來排除當前li 。 嘗試這個：

 $('li a').on('click', function() { let $li = $(this).parent().toggleClass('open'); $('li').not($li).removeClass('open'); });

 ul { list-style: none; } li { display: inline-block; padding: 10px; }.open { background-color: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <ul> <li> <a href="#">Item 1</a> </li> <li> <a href="#">Item 1</a> </li> </ul> </nav>

Answer 2

您可以使用

1. jquery toggleClass() 在單擊/取消單擊同一鏈接時切換黃色突出顯示（.open css 類）。
2. jquery 兄弟姐妹（）刪除。在所有其他 li 項目上打開 class。

下面是demo的鏈接

https://jsfiddle.net/so1u8hq6/

 $('li a').on('click', function() { $(this).parent().siblings().removeClass('open'); $(this).parent().toggleClass('open'); });

 ul { list-style: none; } li { display: inline-block; padding: 10px; }.open { background-color: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <ul> <li> <a href="#">Item 1</a> </li> <li> <a href="#">Item 2</a> </li> <li> <a href="#">Item 3</a> </li> </ul> </nav>

Answer 3

聚會遲到了，但是，在看到提供的答案和您使用的一些 CSS 之后，我不得不提出我的建議：

• 用戶體驗。 通常避免設置 LI 標簽的樣式，或者至少設置所需的display並繼續。 直接為a標簽設置樣式（使用必要的填充等）。 您不僅會得到更少的 CSS 照顧，而且觸摸交互區域更大。 如果它不是可交互的 UI 部分，則將其設置為黃色是沒有意義的。 同樣在 JS 中，您不再需要關心LI包裝器，而只需關心實際A元素。
• 不要使用像$('li a')這樣的常見選擇器——它們可能會針對您應用中的任何LI→A 元素。 而是更具體並使用 Class ，例如： .tabs for parent UL 。 在 CSS 和 JS 中。
• 嘗試使用事件委托（在 jQuey 中使用.on()方法）。 它不僅可以幫助您在需要的地方捕獲Event.delegateTarget父UL ，還可以捕獲this （單擊的元素），但主要引用包含在公共父元素中a元素的所有“組” 。 這樣，您可以在一個頁面中擁有任意數量的.tabs 。 是的，多虧了事件委托，您甚至可以動態添加 LI 元素——您的 JS 仍將按預期工作。
• 由於您使用的是<a href="#">錨元素，而不是（更正確的） <button type="button>"元素，因此您還需要使用Event.preventDefault()以防止瀏覽器默認行為，那就是跟隨錨點（滾動頁面，導航等......）
• 當您想要定位並移除"open" class 時，請使用選擇器"a.open" 。 通過僅使用"a" （或在此頁面上的其他答案中 - "li" ），您將無用地觸摸元素，試圖刪除首先不存在的 class。

最后，這是您的任務所需的 CSS 潤飾和正確的 jQuery：

 $(".tabs").on("click", "a", function(ev) { ev.preventDefault(); $("a.open", ev.delegateTarget).not(this).removeClass("open"); $(this).toggleClass("open"); });

 .tabs { display: flex; list-style: none; padding: 0; } /* Style your Anchors, not the dummy LI wrappers */.tabs a { padding: 10px; }.tabs a.open { background-color: yellow; }

 <ul class="tabs"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

解釋唯一復雜的行：

$(
  "a.open",             // Target just the ones (if any) of class "open"
  ev.delegateTarget     // inside the common ".tabs" ancestor
)
  .not(this)            // ... not the clicked element (since later we'll use .toggleClass on it)
  .removeClass("open"); // ... remove that class "open" 

rest 很容易解釋。

進一步閱讀：

• jQuery 事件委托
• jQuery event.delegateTarget
• Event.preventDefault

Answer 4

所以你只希望黃色背景作為用戶交互的標志而不是顯示背景顏色？ 您是否嘗試過使用mousedown/mouseup函數而不是.on('click', function(){...} ？

我能夠通過這種方法模擬顏色展示的點擊事件：

 $('li a').mousedown(function() { $('li a').parent().removeClass('open'); $(this).parent().addClass('open'); }); $('li a').mouseup(function() { $('li a').parent().removeClass('open'); });

 ul { list-style: none; } li { display: inline-block; padding: 10px; }.open { background-color: yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <ul> <li> <a href="#">Item 1</a> </li> <li> <a href="#">Item 1</a> </li> </ul> </nav>