0

如何创建一个类似于 xenforo 的下拉菜单，它会在 2 秒后自动关闭？我试过搜索，但不幸的是找不到任何合适的解决方案。

但我不知道如何以及要使用什么代码来实现；1. 如果鼠标光标悬停在主菜单链接上 2 秒，下拉菜单会在 2 秒后打开。2. 如果鼠标光标离开下拉菜单 2 秒，下拉菜单关闭。

谢谢！

这是 Jsfiddle；

4

3 回答 3

0

Try this:

$(document).ready(function(){
    $("#sub-menu li").hide(); // Hide in order to fadeIn to work
    $("#main-menu ul").hover(
        function(){
            $("#sub-menu li").fadeIn(slow);
        },
        function(){
            $("#sub-menu li").fadeOut(slow);
        });
});
于 2013-09-28T12:46:09.413 回答
0 
<html>
<head>
<style>
.dd_menu {
background: none;
padding: 0px;
margin:0;
list-style-type:none;
height:10px;
border: none;
font-size: 11px;
font-family: "Candarab";
}

.dd_menu li {
background: none;
float: left !important;
height:20px;
margin-left: 1px;
margin-top: 4px;
}

.dd_menu li a {
padding: 15px 5px;
display:inline;
color:#000;
text-decoration:none;
font:11px arial, verdana, sans-serif;
}

.dd_menu li:hover a {
text-decoration:none;
padding: 15px 5px;
}

.dd_menu ul {
position:absolute;
left:-9999px;
top:9px;
list-style-type:none;
text-decoration: none;
float: left !important;
}

.dd_menu li:hover {
position:relative;
background:#176093;
text-decoration: none;
z-index: 1000;
}

.dd_menu li:hover ul {
left:0px;
top:20px;
background:lavender;
padding: 3px 3px;
border:1px solid grey;
width:160px;
text-decoration: none;
}

.dd_menu li:hover ul li {
height:18px;
border:none;
}

.dd_menu li:hover ul li a {
height:18px;
padding:0px;
display:block;
font-size:11px;
width:158px;
line-height:18px;
text-indent:5px;
color:#444;
background-color:lavender;
text-decoration:none;
border:1px solid transparent;
}

.dd_menu li:hover ul li a:hover {
height:18px;
background:silver;
color:#000;
float: left;
border:solid 1px #444;
}
</style>
</head>
<body>
<ul class="dd_menu">
    <li><a href="#">Main Menu <span class="smallesttext">&#x25BC;</span></a>
  <ul>
    <div align="left">
        <li><a href="#">Drop Down Link</a></li>
        <li><a href="#">Drop Down Link</a></li>
        <li><a href="#">Drop Down Link</a></li>
        <li><a href="#">Drop Down Link</a></li>
        <li><a href="#">Drop Down Link</a></li>
    </div>
  </ul>
</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    $(".dd_menu li a").hover(
        function(){
            $(".dd_menu li ul div li a").hide().fadeIn('slow');
        },
        function(){
        });
    $("ul div li").hover(
        function(){
            $(".dd_menu li ul div li a").show();
        },
        function(){
            ;
        });
    });
</script>
</body>
</html>

尝试这个。同样，在鼠标移出时添加您想要的内容。如果它有助于考虑接受答案。

于 2013-08-19T05:29:30.993 回答
0

您可以使用 jquery 来使用此功能。您可以使用慢速淡出来代替等待 2 秒，这样用户就可以知道会发生什么。

$(document).ready(function(){
    $("#sub-menu").hide(); // Hide in order to fadeIn to work
    $("#main-menu").hover(
        function(){
            $("#sub-menu").fadeIn(slow);
        },
        function(){
            $("#sub-menu").fadeOut(slow);
        });
});
于 2013-08-18T05:00:19.960 回答