1

我正在尝试制作带有子菜单的最小菜单。到目前为止，这是我的代码：

<div id="ctl100_cphHeader_NavigationBar">
    <li></li> <!-- makes first left-border in css -->
    <li><a class="navlink" href="/ComingSoon.aspx">N/A</a></li>
    <li><a class="navlink" href="/ComingSoon.aspx">N/A</a></li>
    <li>
        <a class="navlink" href="/ComingSoon.aspx">N/A</a>
        <div class="submenu">
            <a class="navlink" href="/">Home</a>
            <a class="navlink" href="/">Home</a>
        </div>
    </li>
    <li>
        <a class="navlink" href="/ComingSoon.aspx">N/A</a>
        <div class="submenu">
            <a class="navlink" href="/ComingSoon.aspx">Coming Soon</a>
        </div>
    </li>
</div>

我想使用 jquery 使其在 $('.navlink').mouseenter() 上出现它下面的任何子菜单，而在 $('.navlink').mouseleave() 上它下面的任何子菜单都会消失。我该怎么办？我是 jquery 新手，不擅长选择器。

4

3 回答 3

2

尝试以下脚本：

$(document).ready(function () { 
    var speed = 500;//The speed is in milliseconds 
    $('li').hover(function () {
         //show its submenu
         $(this).children('.submenu').stop().slideDown(speed);
        },
        function () {
         //hide its submenu
         $(this).children('.submenu').stop().hide(speed);      
     });
});​

我只是使用了悬停功能，第一个function(){...是onMouseEnter，第二个function(){...是onMouseLeave。还要记住，子菜单必须是display:none.

您可以通过将以下代码添加到前一个代码的顶部来使用 javascript 执行此操作：

$('.submenu').hide();

我建议使用 CSS 来隐藏它们：

.submenu{
  display:none
}

您不需要在 JavaScript 中添加那个额外的函数。

查看JSfiddle以查看此代码的实际效果！

于 2012-06-30T04:36:46.330 回答
0

工作演示 http://jsfiddle.net/QYEWs/

由于您没有提到任何关于您正在使用的 Jquery 代码的内容，因此请使用 jsfiddle 中提到的代码。

工作演示应该会有所帮助。

这是从 Jquery http://jquery.com/开始的好地方

代码

// Hide inactive ones
$('#main-nav > li:not(.current-menu-parent) .sub-menu').hide();

// What to do when hovering over a menu item
$("#main-nav > li").hoverIntent({
    over: function(){
        // Find the hovered menu's sub-menu
        var $submenu = $(this).find('.sub-menu');

        // Stop the animation and fade out the other submenus
        $('.sub-menu').not($submenu).stop(true,true).fadeOut(260);

        // Fade in the current one
        $submenu.fadeIn(260);
    }
});

// What to do when user leaves the navigation area
$('#main-nav').mouseleave(function(){
    // Fade out all inactive submenus
    $('#main-nav > li:not(.current-menu-parent) .sub-menu').fadeOut(260);

    // Fade in the active one
    $('.current-menu-parent .sub-menu').fadeIn(260);
});​
于 2012-06-30T04:34:38.403 回答
-1

为了让它显示（假设你已经隐藏了子菜单）你可以做这样的事情

$('.navlink').hover(function(){
   $(this).siblings('submenu').show();
})

问题是你不想在离开导航链接时隐藏它，因为你必须离开导航链接才能进入子菜单。因此，您可能必须将隐藏部分附加到父 LI。

此外，您还需要考虑不使用鼠标的设备……例如键盘和触摸设备。

于 2012-06-30T04:34:00.450 回答