Question

我已经习惯了这个问题一段时间了。我尝试做的是当我点击菜单栏上的链接时，子菜单显示出来。然后，如果我将鼠标悬停在菜单栏上的另一个链接上，则会显示该链接的子菜单，并关闭之前打开的子菜单。然后，当我再次点击打开子菜单的链接时，它应该关闭当前打开的子菜单。

我的代码现在做的是，当我点击菜单栏上的链接时，它会打开子菜单。子菜单保持不变直到我单击菜单栏上的其他链接以关闭现有子菜单并打开所单击项目的子菜单。要关闭子菜单，请单击与子菜单关联的链接。

这是我的HTML代码

<div id="index">
<div id="menu-bar">
    <ul class="menu-bar">
    <li>Home</li>
    <li><a href="javascript:void(0)" class="myLink" divId="about">About Me</a>
    <ul id="sub-menu" class="about">
    <li><a>something</a></li>
    <li><a>Filler</a></li>
    </ul>
    </li>
    <li><a href="javascript:void(0)" class="myLink" divId="resume">Resume</a>
    <ul id="sub-menu" class="resume">
    <li><a>Something</a></li>
    <li><a>Filler</a></li>
    </ul>
    </li>
    <li>Portfolio</li>
    <li>Contact Me</li>
</ul>
</div>
<div id="content">
<p>Reactive</p>
</div>
</div>

这是我的CSS代码

#index {
    width: 1000px;
    height: 100%;
}

#menu-bar {
   width: 200px;
   height: 100%;
   margin: 10px 0px 0px -10px;
   padding: 0px 0px 0px 10px;
   z-index: 12;
   float: left;
}

ul.menu-bar li {
    display: block;
    font-size: 17px;
    vertical-align: middle;
    margin: 0px 0px 12px;
}

ul.menu-bar li ul#sub-menu {
    display: block;
    z-index: 12;
    padding-left: 1px;
    width: 825px;
} 

ul.menu-bar li ul#sub-menu {
    margin: -10px 0px 0px 100px;
    float: left;
    height: 0px;
}

#content {
   width: 800px;
   height 100%;
   float: left;
}

这是我的jQuery代码

$("#sub-menu.about").hide();
$("#sub-menu.resume").hide();

var curId;
var prevId = "";
//when the link is clicked
$(".myLink").click(function(e){
    curId = $(this).attr('divId');
    if(prevId === curId){   //if same value is clicked toggle it
        $("#sub-menu."+curId).toggle();
        prevId = "";        //clear prevId to avoid confusion
    } else{
        if(prevId !== ""){ //if different value is clicked hide the previous ones
            $("#sub-menu."+prevId).hide();
        }
        $("#sub-menu."+curId).show();   //show the current one clicked
    }
    prevId = curId; //set prevId to clicked value for comparison
});

$(".myLink").hover(function(){
    if(prevId !== ""){
        curId = $(this).attr('divId');
        console.log("mouseover "+curId);
    }
},
function(){
    if(prevId !== ""){
        curId = $(this).attr('divId');
        console.log("mouseleave " +curId);
    }
});

我还把代码放在JS小提琴上，所以请随意玩它并给我一些指导。

http://jsfiddle.net/dcmeister/SmM4D/1/

单击以显示子菜单，然后悬停以查看其他子菜单

0 个答案: