jquery - 使用 li 和 jquery 突出显示子菜单

Question

我正在编写一个下拉子菜单，如下所示:

<ul id="main_menu">
    <li class="enter-top-level">
        <a href="#entering">
            Enter Data
            <ul id="enter_scheme_global">
                <li class='submenu'>
                    <a href="#enter_scheme">
                        Scheme Details
                    </a>
                </li>
                <li class='submenu'>
                    <a href="#enter_transformer">
                        Transformer
                    </a>
                </li>
                <li class='submenu'>
                    <a href="#enter_AIS">
                        AIS
                    </a>
                </li>
                <li class='submenu'>
                    <a href="#enter_GIS">
                        GIS
                    </a>
                </li>
            </ul>
        </a>
    </li>

我想用 jquery 给它一个动画 slideDown 和 slideUp 效果，我尝试了以下方法:

$('a').mouseenter(function() {
    $(this).find('ul').slideToggle(500);
    $(this).parent('.submenu').css({"background-color" : "#700000"});
});//end $('a').hover function*/

$('a').mouseout(function() {
    $(this).find('ul').fadeToggle(500);
    $(this).parent('.submenu').css({"background-color" : "#C8C8C8"});
});//end $('a').hover function*/

但没有成功。任何帮助任何人。

Answer 1

代码有几个问题。

首先，您的 HTML 需要更改。您的顶级 a 标记包装了所有元素，这会使子 a 元素无用。您也不需要为 mouseover/mouseout 设置两个单独的函数。您可以使用 hover() 方法。此外，定位父 li 将允许菜单保持打开状态，因为鼠标仍在其上(与 a 元素相反)。这是工作代码:

fiddle : http://jsfiddle.net/xf02743m/1/

HTML

<ul id="main_menu">
    <li class="enter-top-level"><a href="#entering">Enter Data</a>

        <ul id="enter_scheme_global">
            <li class='submenu'><a href="#enter_scheme">Scheme Details</a>

            </li>
            <li class='submenu'><a href="#enter_transformer">Transformer</a>

            </li>
            <li class='submenu'><a href="#enter_AIS">AIS</a>

            </li>
            <li class='submenu'><a href="#enter_GIS">GIS</a>

            </li>
        </ul>
    </li>

CSS - 首先隐藏子菜单

#enter_scheme_global {
    display:none;
}

jQuery

$(".enter-top-level").hover(function () {
    $(".enter-top-level ul").slideDown("slow");
    $(this).parent().css({"background-color" : "#700000"})
}, function(){
    $(".enter-top-level ul").slideUp("slow");
    $(this).parent().css({"background-color" : "#C8C8C8"});
});