Question

当我将鼠标悬停在第二个菜单（子菜单）元素上时，我想更改我的第一个菜单项的颜色或任何样式（添加类）（并在不悬停时删除类）。这些菜单与id和class属性相关。我有一些问题。

我的HTML：

<ul id="main-menu" class="mmenu">
<li class="mzr-drop panel-menu">
    <a class="menu-item menu-item-238" href="#">First</a>
    <a class="menu-item menu-item-243 active" href="#">Second</a>
    <a class="menu-item menu-item-246" href="#">Third</a>

    <div id="bg_menu_main" class="bg_menu">
            <div class="menu-header">
                <ul id="menu-main-nav-1" class="menu">
                    <li class="menu-item menu-item-238">
                        <ul class="sub-menu">
                        <li id="menu-item-239" class="menu-item menu-item-239">Item</li>
                        <li id="menu-item-240" class="menu-item menu-item-240">Item</li>
                        <li id="menu-item-241" class="menu-item menu-item-241">Item</li>
                        <li id="menu-item-242" class="menu-item menu-item-242">Item</li>
                        </ul>
                    </li>
                    <li class="menu-item menu-item-243">
                        <ul class="sub-menu">
                        <li id="menu-item-244" class="menu-item menu-item-244">Item</li>
                        <li id="menu-item-245" class="menu-item menu-item-245">Item</li>
                        </ul>
                    </li>
                    <li class="menu-item menu-item-246">
                        <ul class="sub-menu">
                        <li id="menu-item-247" class="menu-item menu-item-247">Item</li>
                        <li id="menu-item-248" class="menu-item menu-item-248">Item</li>
                        <li id="menu-item-249" class="menu-item menu-item-249">Item</li>
                        <li id="menu-item-250" class="menu-item menu-item-250">Item</li>
                        </ul>
                    </li>
                </ul>
            </div>
    </div>
</li>

$('ul#menu-main-nav-1 li').hover(function () {
    var id = $(this).attr('id');
    $('#main-menu li.panel-menu').find('a.menu-item-'+id).addClass('hover');
});

它不起作用。我忘记了什么？请帮忙。谢谢

Answer 1

试试这个

$('ul#menu-main-nav-1 li').find('li[id^="menu-item-"]').hover(function () {
    var id = $(this).attr('id');
    $('#main-menu li.panel-menu').find('a.'+id).addClass('hover');
});

Answer 2

find('a.menu-item-'+id)＆lt;＆lt;＆lt;＆lt;

如果id为"menu-item-247"

因此它变为"a.menu-item-menu-item-247"

jquery - 当悬停另一个与id和class相关的元素时，改变元素的样式

2 个答案: