2

我正在尝试构建一个 Jquery/CSS 下拉菜单，到目前为止一切进展顺利。我对 JQuery 还是很陌生，而且我大部分时间都明白 - 但是，我无法弄清楚我在这里做错了什么。

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

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

我有“选定”类查看单击按钮时按钮的外观，但我似乎无法做到，因此“选定”类应用于单击事件。理论上，这是：

<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);
    });
});

我已经尝试以多种不同的方式重写此代码，但我对自己可能做错的地方已经没有想法了。

那里的任何人都对我可以做些什么来解决这个问题有任何指示吗？

先感谢您！！

4

2 回答 2

2

像这样做：

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).

于 2013-05-01T00:22:11.703 回答
0

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

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

它对我有用

于 2013-05-01T00:29:25.193 回答