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

forループでそれらをすべて設定していると思いますが、その後ifステートメントを無視しています。if ステートメントを for ループ内に配置し、else を追加して他の要素を表示しないようにしてください。また、CSS ホバーだけでこれを行う方法があり、調べたいと思うかもしれない JavaScript はありません。このサイトのメイン ナビゲーション (About/Portfolio/Contact/Extras) はそのように行います。CSS のみ: http://www.visionspark.com

ただし、コードを調整する方法は次のとおりです。

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 に答える