Question

有人可以帮助或帮助我吗？我一直在寻找和阅读，但我无处可寻找答案。我有点不喜欢jquery，所以我需要帮助。我有一个下拉菜单。我想要实现的是，当我点击带有子子下拉菜单的子菜单时，它会改变背景。现在它起作用了，背景发生了变化，但是它也适用于它的兄弟元素，它们也有一个下拉。我想更改单击元素的背景。

jquery：

<listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>

请参阅actual demo

Answer 1

我更新了您的fiddle：

$('.withsub a').on('click', function () {
    if ($(this).siblings('.tmenu-subs02').is(':visible')) {
        $(this).siblings('.tmenu-subs02').hide();
        $(this).parent().removeClass('clicked');
    } else {
        $(this).siblings('.tmenu-subs02').show();
        $(this).parent().addClass('clicked');
    }
});

Answer 2

您正在定位所有.withsub元素，而您只需要定位最接近的.withsub父元素。

您需要使用：

$('.withsub a').on('click', function () {
    if ($(this).siblings('.tmenu-subs02').is(':visible')) {
        $(this).siblings('.tmenu-subs02').hide();
        $(this).closest('.withsub').removeClass('clicked');
    } else {
        $(this).siblings('.tmenu-subs02').show();
        $(this).closest('.withsub').addClass('clicked');
    }
});

<强> Working Demo

您还可以使用.toggle()和.toggleClass()

缩小代码范围

$('.withsub a').on('click', function () {
        $(this).siblings().toggle();
        $(this).closest('.withsub').toggleClass('clicked');
});

<强> Demo using toggle and toggleclass

Answer 3

你可以这样做。使用 .children()

$('.withsub').on('click', function () {
        if ($(this).children('.tmenu-subs02').is(':visible')) {
            $(this).children('.tmenu-subs02').hide();
            $(this).removeClass('clicked');
        } else {
            $(this).children('.tmenu-subs02').show();
            $(this).addClass('clicked');
        }
    });

检查Updated Fiddle

单击时更改背景

3 个答案: