Question

我的主要问题是，如果我尝试导航到子导航，背景会向上滑动并且不会停留。

这是JSFiddle-Snippet： http://jsfiddle.net/9UaRL/

任何对代码有所了解的人的简短描述：）

- ＆GT;当将鼠标悬停在main-nav-btn（DEMO 1，DEMO 2，DEMO 3）上时，然后是＆＃34; main-sub＆＃34; （div-container）出现。
- ＆GT;在这里抓住：如果我向下导航，那么我就可以进入＆＃34; main-sub＆＃34;在我设置容器向上滑动并且不要停留的时间之后。为什么？

我打开你的所有建议我唯一想要的是用这些按钮标签来构建菜单......

感谢您的帮助。

这里的jquery-code无论如何都无法通过＆＃34;链接2 jsfiddle.net必须附带代码......

$(".main-nav-btn").each(function(){
        var over = $(this);
        var ishovered = false;
        var getMainValue = $(this).data('value');
        var show = function() {
            ishovered = true;
            $(".main-sub").stop().animate({height: "toggle"}, 100, "linear");
            };
        var hide = function() {
                ishovered = false;
                    setTimeout(function(){
                        if(ishovered === false){
                        $(".main-sub").stop().animate({height: "toggle"}, 100, "linear"); 
                        };
                    }, 100);
            }
        if(getMainValue != 'home') {
            over.hover(show, hide);
        }
    });

Answer 1

您的代码太复杂了。见fiddle...

你可能会喜欢这个...

<div id="menu-wrap" >
<div id="menu" >
    <ul>
        <li id="home-btn" >home</li>
        <li id="demo1-btn" >demo1</li>
        <li id="demo2-btn" >demo2</li>
        <li id="demo3-btn" >demo3</li>
    </ul>
</div>
<div id="menu-drop1" ></div>
<div id="menu-drop2" ></div>
<div id="menu-drop3" ></div>
</div>

简单的基于jQuery DIV的菜单

1 个答案: