2

当我滑动菜单项时，它会完美地向下滑动，而当我离开菜单项时，它会完美地向上滑动，我尝试制作一个 Jquery 下拉菜单。

唯一的问题是，当我将鼠标向下移动到子菜单时，它会向上滑动，我想要的是保持打开状态，直到我离开菜单项或子菜单。

HTML

<ul>
    <a href="dashboard.php"><li class="dashboard icon-home">Dashboard</li></a>
    <a href="#"><li class="icon-pages">Paginas</li></a>
    <a class="trigger" href="#"><li class="afbeeldingen icon-image">Afbeeldingen</li></a>
    <div class="adminsubmenu">
        <a href="#">Submenu item</a>
        <a href="#">Submenu item</a>
        <a href="#">Submenu item</a>
    </div>
    <a href="#"><li class="icon-users">Gebruikers</li></a>
    <a href="#"><li class="icon-settings">Instellingen</li></a>
</ul>

CSS

div#adminmenu ul li {
    font-size:13px;
    font-weight:600;
    padding:7px 0 7px 28px;
    background-color:#fff;
    width:175px;
    border-bottom:1px solid #c2c2c2;
    border-right:1px solid #c2c2c2;
}

div.adminsubmenu {
    height:100px;
    width:175px;
    background:url(../images/adminmenu_bg.png) repeat-y top right #e6e6e6;
}

jQuery

$(document).ready(function(){

            $(".adminsubmenu").hide();

            $("a.trigger").mouseover(function(){
                $(".adminsubmenu").slideDown();
            }).mouseleave(function(){
                $(".adminsubmenu").slideUp();
            });

        });

这是小提琴

4

3 回答 3

3

为了使 HTML 有效，<a>您应该将.<li>

也就是说，只需更改您的 JavaScript 以执行您想要的操作：

$("a.trigger").mouseover(function(){
            $(".adminsubmenu").slideDown();
        });
$('.adminsubmenu').mouseleave(function(){
            $(".adminsubmenu").slideUp();
        });

更好的是，将子菜单放在触发元素内。这样，只要您的鼠标悬停在子菜单上，您仍然会悬停在触发器上：

<li class="afbeeldingen icon-image trigger">
    <a class="" href="#">Afbeeldingen</a>
    <ul class="adminsubmenu">
        <li><a href="#">Submenu item</a></li>
        <li><a href="#">Submenu item</a></li>
        <li><a href="#">Submenu item</a></li>
    </ul>
</li>

新的JS：

$(".trigger").mouseover(function () {
    $(".adminsubmenu").stop().slideDown();
}).mouseleave(function () {
    $(".adminsubmenu").stop().slideUp();
});

http://jsfiddle.net/mblase75/B3GB6/

于 2013-11-06T22:27:15.350 回答
1 
<li><a ... </a></li>

代替

<a><li> </li></a>

实际上是相反的

于 2013-11-06T22:35:14.090 回答
0

它完全按照你说的做。当鼠标离开时a.trigger，菜单向上滑动。因此，您只需将其更改为$(".adminsubmenu").mouseleave 以下是您想要的：

http://jsfiddle.net/2Ajuz/1/

$(document).ready(function(){

    $(".adminsubmenu").hide();

    $("a.trigger").mouseover(function(){
        $(".adminsubmenu").slideDown();
    })
    $(".adminsubmenu").mouseleave(function(){
        $(".adminsubmenu").slideUp();
    });

});
于 2013-11-06T22:29:53.113 回答