jQuery類型的第一個元素單擊

Question

我正在解決一個問題，其中有一個菜單級別很深。 我正在嘗試獲取它，以便如果單擊第一級元素（添加類.ubermenu-active ），它將尋找該類的任何其他第一級元素並將其刪除。

$('.ubermenu-item-level-0 span').on('click',function() {
    var target = $('.ubermenu-item-level-0');
    $('.ubermenu li.ubermenu-item-level-0').removeClass('ubermenu-active');
    target.parents('.ubermenu li.ubermenu-item-level-0').toggleClass('ubermenu-active');
});

HTML（模擬）：

<ul class="ubermenu">
    <li class="ubermenu-item-level-0">
        <a class="ubermenu-target">
            <span class="ubermenu-target-title">Level 1</span>
        </a>
        <ul class="ubermenu-submenu">
            <li class="ubermenu-item-level-1">
                <a class="ubermenu-target">
                    <span class="ubermenu-target-title">Level 2</span>
                </a>
            </li>
            <li class="ubermenu-item-level-1">
                <a class="ubermenu-target">
                    <span class="ubermenu-target-title">Level 2</span>
                </a>
                <ul class="ubermenu-submenu">
                    <li class="ubermenu-item-level-2">
                        <a class="ubermenu-target">
                            <span class="ubermenu-target-title">Level 3</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
        <li class="ubermenu-item-level-0">
            <a class="ubermenu-target">
                <span class="ubermenu-target-title">Level 1</span>
            </a>
        </li>
    </li>
</ul>

現在，如果單擊任何子元素，父級將關閉

Answer 1

當前，您的target var正在選擇類.ubermenu-item-level-0所有元素，因此，當您切換類時，您將切換所有父元素。 您的目標var應該是與所單擊元素有關的東西，例如var target = $(this).closest('.ubermenu-item-level-0');

Answer 2

您可以停止事件傳播：

event.stopPropagation()

Answer 3

在沒有看到完整的HTML的情況下，我建議嘗試這樣做：

$('.ubermenu-item-level-0 span').on('click',function(e) {
       e.stopPropagation();
       var target = $('.ubermenu-item-level-0');
       $('.ubermenu li.ubermenu-item-level-0').removeClass('ubermenu-active');
       target.parents('.ubermenu li.ubermenu-item-level-0').toggleClass('ubermenu-active');
    });

Answer 4

因此，您的示例HTML不是我期望看到的。 。 。 具體來說，您的第二個<li class="ubermenu-item-level-0" . . . <li class="ubermenu-item-level-0" . . . 元素當前在第一個元素下顯示為兒童，而您的描述聽起來像他們應該是兄弟姐妹。

為了解決這個問題，我將假定這兩個li是彼此的兄弟，並且代碼以某種方式混淆了。 :)

所以，這就是我的處理方式。 。 。

var sFirstLevelMenuClass = ".ubermenu-item-level-0";
var sActiveMenuClass = "ubermenu-active";
var $firstLevelMenuOptions = $(".ubermenu").find(sFirstLevelMenuClass);

$firstLevelMenuOptions.children("a").children("span").on("click", function() {
    $firstLevelMenuOptions.removeClass(sActiveMenuClass);
    $(this).closest(sFirstLevelMenuClass).addClass(sActiveMenuClass);
});

基本上，我簡化了您的邏輯並修復了jQuery代碼中的一個小問題。

---

詳細說明

問題是，當您使用$('.ubermenu-item-level-0 span')作為更改事件的選擇器時。 那就是“任何作為ubermenu-item-level-0元素的后代的span元素”。 因此，除了直接在ubermenu-item-level-0列表項下的跨度之外，它還選擇了ubermenu-item-level-1和ubermenu-item-level-2元素下的ubermenu-item-level-1 ，因為它們也是后代。

因此，我將選擇器更改為$firstLevelMenuOptions.children("a").children("span") ，它轉換為“所有span ，即a的直接子代，即ubermenu-item-level-0的直接ubermenu-item-level-0 element”（ 注意： $firstLevelMenuOptions設置為等於$(".ubermenu").find(".ubermenu-active");通過代碼前面的邏輯 ）。 這將阻止選擇器拾取較低的水平spans 。

除此之外，還精簡了一些選擇器以提高效率，我唯一改變的另一件事是如何操作ubermenu-active類。 在我的解決方案中，有兩個步驟：

1. 從所有 ubermenu-item-level-0元素中刪除ubermenu-active
2. 將ubermenu-active添加到與所單擊span最接近的ubermenu-item-level-0元素（即$(this) ）。

這基本上是重置列表，然后重新選擇適當的菜單項激活我。