Question

我正在尝试构建一个Jquery / CSS下拉菜单，到目前为止，情况一直很顺利。我是JQuery的新手，我大部分时间都是这样做的 - 然而，我无法弄清楚我在这里做错了什么。

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

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

我让“选中”这个类看起来我希望按钮在单击按钮时看起来如何，但我似乎无法做到这一点所以“click”类应用于click事件。理论上，这个：

<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)直接在处理程序中访问该类。

Answer 2

您是否尝试在通话中使用“this”？

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

它对我有用

点击事件上的JQuery addClass（）

2 个答案: