0

当光标位于菜单项上时，我试图让我的子菜单出现，当您转到另一个菜单选项时，新的子菜单会替换另一个，但现在第一个选择的子菜单留在屏幕上，永远不会消失，并且当您转到另一个菜单选项时，另一个子菜单出现在第一个菜单下...有人可以帮我吗？谢谢你！

html:

     <div id="menu">
<div class="menu" id="menu1" onmouseover="affiche(this)"><a href="#.html">   MENU1 </a>
    <div class="sousmenu" id="sousmenu1" style="display:none" onmouseout="affiche(this)">
        <div><a href="#.html">SOUSMENU11</a></div>
        <div><a href="#.html">SOUSMENU12</a></div>
        <div><a href="#.html">SOUSMENU13</a></div>
        <div><a href="#.html">SOUSMENU14</a></div>

    </div>
</div>
<div class="menu" id="menu2" onmouseover="affiche(this)"><a href="#.html">MENU2</a>
    <div class="sousmenu" id="sousmenu2" style="display:none" onmouseout="affiche(this)">
        <div><a href="#.html">SOUSMENU21</a></div>
        <div><a href="#.html">SOUSMENU22</a></div>
        <div><a href="#.html">SOUSMENU23</a></div>
        <div><a href="#.html">SOUSMENU24</a></div>
        <div><a href="#.html">SOUSMENU25</a></div>

    </div>
</div>
<div class="menu" id="menu3" onmouseover="affiche(this)"><a href="#.html">MENU3</a>
    <div class="sousmenu" id="sousmenu3" style="display:none" onmouseout="affiche(this)">
        <div><a href="#.html">SOUSMENU31</a></div>
        <div><a href="#.html">SOUSMENU32</a></div>
        <div><a href="#.html">SOUSMENU33</a></div>
        <div><a href="#.html">SOUSMENU34</a></div>
    </div>
</div>
<div class="menu" id="menu4"><a href="#">MENU4</a></div>
<div class="menu" id="menu4"><a href="#">MENU5</a></div>
<div class="menu" id="menu5"><a href="#">MENU6</a></div>
<div class="menu" id="menu6"><a href="#">MENU7</a></div>

CSS：

    #menu{
margin:0px 0 0 9px;
background:#50626c;
color:#fff;
float:left;
display:inline;}
    #menu div{
width:234px;
text-align:center;}
     .menu{
position:relative;}
    #menu div a:link, #menu div a:visited, #menu div a:hover{
color:#fff;
font-family:arial,sans-serif;
font-size:14px;
text-decoration:none;
padding-top:7px;
height:28px;
display:block;}
    #menu div a:link, #menu div a:visited{
background:url(BG.jpg) no-repeat;}
    #menu div a:hover, #menu div a:active, #menu div a:focus{
background:#4172CB ;
text-decoration: underline;}
     .sousmenu{
position:absolute;
left:234px;
top:0;}

js

function affiche(obj){
    var id = obj.id;

    for(var i = 1; i <= 2; i++){
            document.getElementById('sousmenu'+i).style.display = "none";
    }

    if(document.getElementById('sous'+id)){
            document.getElementById('sous'+id).style.display = "block";
    }

}
4

1 回答 1

0

I think you're setting them all with the for loop and it's ignoring the if statement afterwards. Try putting the if statement inside the for loop and add an else for the other elements to be displayed as none. Also, there's a way to do this with just CSS hovers and no javascript you might want to look into. The main nav on this site (About/Portfolio/Contact/Extras) does that does it that way, CSS only: http://www.visionspark.com

But here's how to adjust your code:

for(var i = 1; i <= 2; i++){
    if(document.getElementById('sous'+id)){
        document.getElementById('sous'+id).style.display = "block";
    } else {
        document.getElementById('sousmenu'+i).style.display = "none";
    }
}
于 2012-07-03T20:09:00.857 回答