Question

以下网址可以解决问题：

http://streeten-new.streeten.co.uk/

点击汉堡包打开导航
点击“服务”
点击子菜单中的“＆lt; services”以尝试然后返回

出于某种原因，removeClass没有删除'submenuActive'类。我确信我的目标是正确的元素，因为添加一个测试类没有问题。

我尝试使用纯javascript而不是jQuery来做到这一点，我尝试直接用jQuery更改css，而不是添加/删除一个类 - 在所有情况下我都无法撤消我对此元素所做的任何更改子菜单首次打开时。

令人沮丧的是因为打开开发工具并突出显示

<ul class="submenuActive">

然后解开

.submenuActive {
    left: 0!important;
}

规则完全按照我希望的方式隐藏子菜单，出于某种原因，我无法通过点击来解决这个问题。

添加了HTML代码：

<nav>
        <div class="navigation">
            <ul >
                <li><a href="#">Studio</a></li>
                <li class="parent"><a href="#">Projects</a>
                    <ul>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">Case Studies</a></li>
                    </ul>
                </li>
                <li class="parent"><a href="#">Services</a>
                    <ul>
                        <li class="menuTitle"><span class="backArrow">&#10094</span> Services</li>
                        <li><a href="#">Branding</a></li>
                        <li><a href="#">Web Design</a></li>
                        <li><a href="#">Online Marketing</a></li>
                        <li><a href="#">Marketing</a></li>
                    </ul>
                </li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

            <a id="tel" href="tel:02076313720"><button>Call us now</button></a>
    <!--        <p>for your free design consultation</p>-->
        </div>
    </nav>

添加了Javascript代码：

$(".parent").click(function(){
        $(this).find("ul").first().addClass("submenuActive");
    });

    $(".menuTitle").click(function(){
        $(this).closest("ul").removeClass("submenuActive");
        $(this).closest("ul").addClass("test");
    });

Answer 1

您可以通过以下方式删除课程：

在html中：

<ul class="submenuActive" onclick="RemoveClass()">

在Jquery

<script>
function RemoveClass()
{
$(this).removeClass("submenuActive");
}
</script>

Answer 2

当您单击子菜单项时，单击事件会使DOM冒泡并重新触发对父项的单击。尝试用以下方法来抑制它：

$(".menuTitle").click(function(e){
    e.stopPropagation();
    $(this).closest("ul").removeClass("submenuActive");
    $(this).closest("ul").addClass("test");
});

Answer 3

我使用.parent("ul").removeClass("submenuActive");代替.closest()

让我工作

在documentation，

给定一个表示一组DOM元素的jQuery对象，.closest（）方法在DOM树中搜索这些元素及其祖先，并从匹配元素构造一个新的jQuery对象。

由于在这种情况下$(this)表示一个dom元素，因此您将永远无法获得一组元素。因此，.closest()在您的情况下不起作用。

Answer 4

当您点击 .menuTitle 时，它也会触发 .parent 的事件。对于解决方案，您需要将事件从子节点停止到父节点

使用event.stopPropagation(); to do this thing

  $(".parent").click(function(){
        $(this).find("ul").first().addClass("submenuActive");
    });

    $(".menuTitle").click(function(event){
        $(this).closest("ul").removeClass("submenuActive");
        $(this).closest("ul").addClass("test");
         event.stopPropagation();
    });

添加后，无法从元素中删除该类

4 个答案: