javascript - JQuery addClass() on Click 事件

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) 访问它.