1

私は Web サイトを設計しており、すべてのメニュー タイトルの下にサブリンクを表示するように単純な JavaScript スクリプトを適用しています。

メニュー タイトルはリストに格納され、それぞれに個別のハイパーリンクが含まれており、次のクラスを持つ CSS ファイルを使用して表示されます。

.hidden {display: none;}
.unhidden {display: block;}

この JavaScript 関数に基づいて:

function unhide(liID) {
         var item = document.getElementById(liID);
         if (item) {
            item.className=(item.className=='hidden')?'unhidden':'hidden';
         }
        }

HTML ファイルのサンプルを次に示します。

<a href="javascript:unhide('menu1');">First Menu</a>
<li id="menu1" class="hidden"> 
    <ul class="subMenus">
        <li>Sub menu 1 item 1</li>
        <li>Sub menu 1 item 2</li>
        <li>Sub menu 1 item 3</li>
        <li>Sub menu 1 item 4</li>
    </ul>
</li>
<a href="javascript:unhide('menu2');">Second Menu</a>
<li id="menu2" class="hidden"> 
    <ul class="subMenus">
        <li>Sub menu 2 item 1</li>
        <li>Sub menu 2 item 2</li>
        <li>Sub menu 2 item 3</li>
        <li>Sub menu 2 item 4</li>
    </ul>
</li>

コードは機能し、うまく機能します。しかし、コード化された方法では、メニューが開いたら、折りたたむにはもう一度クリックする必要があります。そうしないと、3 つまたは 4 つのメニューを開くと、リストが非常に長くなり、混雑してしまいます。

私の質問は....、スペースを節約するために新しいメニューを開くときに、以前に開いたメニューを閉じるためにjavascriptで必要なコードは何ですか?

ありがとう。

4

2 に答える 2

1

イベント ハンドラーをインラインに配置することはお勧めしませんが、実際にはaddEventListener()JavaScript の関数を使用してそれらを設定することをお勧めします。

<a href="javascript:void()" id="menu1" onMouseOver="javascript:unhide('menu1');" onMouseOut="javascript:unhide('menu1')">First Menu</a>

これは、インラインにせずにハンドラーを設定する方法です。

function unhide(liID) {
  return function () {
    var item = document.getElementById(liID);
    if (item) {
      item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden';
    }
  }
}

var menu1 = document.getElementById("menu1");
menu1.addEventListener("mouseover", unhide('menu1'), true);
menu1.addEventListener("mouseout", unhide('menu2'), true);
于 2013-01-12T04:18:20.367 に答える
1

以前のアクティブなメニューをグローバル変数に保持するには、以前に選択したメニューを非表示にできます。次の js が役立つ場合があります

var activemnu="";
function unhide(liID) {

  var item = document.getElementById(liID);
  if(liID!=activemnu && activemnu!="")
  {
     var activeitem= document.getElementById(activemnu);
     activeitem.className= 'hidden';
  }

  if (item) {
     item.className=(item.className=='hidden')?'unhidden':'hidden';
  }
  activemnu=liID;

}

于 2013-01-12T04:38:23.863 に答える