jQuery，如何检测一个元素是否已经切换？

Question

我需要使用jQuery知道页面上的元素是否已经切换。

我有一个菜单，其中包含XXX个元素。

当我点击一个元素时，我使用：$("#elementXX").slideToggle("slow");（XX是一个数字）

如果我点击另一个元素，我需要知道一个元素是否已经被切换，并且在滑动切换我的新元素之前，我需要关闭这个元素。

我该怎么做？我不能像#element1，#element2，#element3等一样逐个检查id。

谢谢！

- Clément Andraud

---

您可以始终无条件地使用.slideUp()函数对元素进行上滑操作，而无需测试其当前状态。 - Beetroot-Beetroot

Answer 1

你可以通过设置数据属性来确定是否切换它。你可以在html中添加属性，也可以直接使用脚本添加。

$("#elementXX").data("toggled", "true"); 

- Adil

---

我建议为该元素添加一个data-toggled属性，以增强可搜索性。 - Rodik

Answer 2

你不需要使用toggle方法，slideUp和slideDown更适合你的情况。你只需这样做：

$("#clickedItem").click(function () {
    var wasVisible = $("#elementXX").is(":visible");
    $("[id^=element]:visible").stop().slideUp("slow");
    if (!wasVisible) {
        $("#elementXX").slideDown("slow");
    }
});

- mattytommo

---

你可能需要使用.stop().slideUp()，以防止元素在先前的事件中被捕获并处于动画状态。 - Beetroot-Beetroot

@Beetroot-Beetroot 好主意，已添加 :) - Mathew Thompson

是的，但是使用这种解决方案，我无法在重新单击时关闭我的元素。 - Clément Andraud

Answer 3

根据jQuery官方网站FAQ的说法：

$("#toggleButton").click(function () {
   if ($("#elementXX").is(":visible")) {
      // toggled down
   }
   if ($("#elementXX").is(":hidden")) {
      // toggled up
   }
});

https://learn.jquery.com/using-jquery-core/faq/how-do-i-determine-the-state-of-a-toggled-element/

- Waleed Asender