javascript - 点击事件上的 JQuery addClass()

Question

我正在尝试构建一个 Jquery/CSS 下拉菜单，到目前为止一切进展顺利。我对 JQuery 还很陌生，大多数时候我都能理解它 - 但是，我无法弄清楚我在这里做错了什么。

我试图在单击其中一个下拉选项卡时更改其类，但它似乎没有按预期工作。

你可以在这里看到我到目前为止的代码: http://jsfiddle.net/utdream/NZJXq/

我有“selected”类，看起来我希望按钮在单击按钮时看起来如何，但我似乎无法做到这一点，因此“selected”类应用于单击事件。从理论上讲，这是:

<li id="menuProducts"><a href="#" class="hasmore">Products</a>
    <div id="ProductsMenu">
        <ul>
            <li><a href="#">Submenu Item</a></li>
            <li><a href="#">Submenu Item</a></li>
        </ul>
    </div>
</li>

应该在点击事件上更改此:

<li id="menuProducts"><a href="#" class="selected">Products</a>
    <div id="ProductsMenu">
        <ul>
            <li><a href="#">Submenu Item</a></li>
            <li><a href="#">Submenu Item</a></li>
        </ul>
    </div>
</li>

这是我当前的 jQuery(不起作用):

jQuery(document).ready(function () {
$('#menuProducts a:first').on('click',
    function () {
        $("a:first").removeClass("hasmore");
        $("a:first").addClass("selected");
        menuSubCloseAll.call(this, 'menuProducts');
        $('#menuProducts').find('li').slideToggle(200);
    });
});

我尝试过用很多很多不同的方式重写这段代码，但我已经不知道自己可能做错了什么。

有人可以告诉我如何解决这个问题吗？

提前谢谢您!!

Answer 1

这样做:

jQuery(document).ready(function () {
$('#menuProducts a:first').on('click',
    function () {
        $(this).removeClass("hasmore");
        $(this).addClass("selected");
        menuSubCloseAll.call(this, 'menuProducts');
        $('#menuProducts').find('li').slideToggle(200);
    });
});

您实际上正在更改第一个 <a> 的类在您的页面中，而不是 <a>您单击了它，您可以使用 $(this) 直接在处理程序中访问它.