0

私は次のJavaScriptを持っています:-

 <script language="javascript" type="text/javascript">
  function HideandUNhideObj(ThisObj){
  nav=document.getElementById(ThisObj).style
  if(nav.display=="none"){
  nav.display='block';
  }else{
  nav.display='none';
  }
  }
 </script>

そして、メニューとサブメニュー用の次の HTML コードがあります

 <ul>
 <li><a href="#" onclick="HideandUNhideObj('div1');">Menu 1</a>
 <div style="display: none;" id="div1">
   <ul>
     <li><a href="#">Submenu 1</a></li>
     <li><a href="#">Submenu 2</a></li>
     <li><a href="#">Submenu 3</a></li>
     <li><a href="#">Submenu 4</a></li>
   </ul>
  </div>
 </li>
</ul>
<ul>
<li><a href="#" onclick="HideandUNhideObj('div2');">Menu 2</a>
 <div style="display: none;" id="div2">
   <ul>
     <li><a href="#">Submenu 1</a></li>
     <li><a href="#">Submenu 2</a></li>
     <li><a href="#">Submenu 3</a></li>
       <li><a href="#">Submenu 4</a></li>
   </ul>
 </div>
 </li>
</ul>

ただし、1 回クリックするとサブメニューが表示され、もう一度クリックすると非表示になります。

次のメニューをクリックすると、サブメニューを非表示にする必要があります。その中のサブメニューを開く必要があるのは、1 つのメニューだけです。

これで、サブメニューを含む 2 つのメニューを開くことができます。メニューをクリックすると、それらが非表示になります。

助けてください。

私が作成したサンプルメニュー:-

ここに画像の説明を入力

4

3 に答える 3

2

サブメニューが 2 つ以上ある場合、@Ashish の回答はあまりスケーラブルではありません。

私はあなたのコードで少し遊んで、このhttp://jsfiddle.net/LfAbb/のようなものを得ました:

function HideandUNhideObj(submenuId){
    hideAllSubmenus();
    showSubmenu(submenuId);
}

function hideAllSubmenus() {
    var submenus = document.getElementsByClassName("submenu");   
    for (var i = 0; i < submenus.length; ++i) {
        var submenu = submenus[i];
        hideSubmenu(submenu);            
    }
}

function hideSubmenu(elem) {
    elem.style.display = "none";
}

function showSubmenu(submenuId) {
    document.getElementById(submenuId).style.display = "block";
}

最初にすべてのサブメニューを閉じてから、必要なサブメニューを開くようにハンドラーを変更しました。また、アプリで JS を頻繁に使用する場合は、jQuery または同様のライブラリの使用を検討してください。これにより、作業が大幅に簡素化されます。

PS また、コードのリファクタリングを検討することもできます。

  1. 現在、 scriptタグにlanguage属性を使用する必要はありません。それは時代遅れです

  2. ローカル変数を宣言するときはvarを使用します。説明

于 2013-09-26T12:48:01.680 に答える
1

メニュー 1 が開いている場合は、メニュー 2 を非表示にする必要があり、その逆も同様です。

   <script language="javascript" type="text/javascript">
      //<![CDATA[
      function HideandUNhideObj(ThisObj){

            if(ThisObj == "div1")
            {
                var div = "div2";
            }
            else
            {
                var div = "div1";
            }

          nav=document.getElementById(ThisObj).style;
          if(nav.display=="none"){
          nav.display='block';
          document.getElementById(div).style.display = "none";
          }else{
          nav.display='none';
          document.getElementById(div).style.display = "block";
          }
      }
      //]]>
    </script>
于 2013-09-26T12:19:46.387 に答える
1

のJavaスクリプト:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
 function hide(i)
 { 
    var elements = document.getElementsByClassName('subMenu');
    for(var k = 0; k < elements.length; k++){
        elements[k].style.display = 'none'; // Hide all elements.
    }
    $(i).show();
 }     

</script>

の HTML:

<ul>
  <li><div>
      <a href="#" class="menu" onclick="hide(sub1);">Menu 1</a>
      <ul id="sub1" class="subMenu">
        <li><a href="#">Submenu 1</a></li>
        <li><a href="#">Submenu 2</a></li>
        <li><a href="#">Submenu 3</a></li>
        <li><a href="#">Submenu 4</a></li>
      </ul>
    </div>
  </li>
</ul>
<ul>
  <li><div>
     <a href="#" class="menu" onclick="hide(sub2)">Menu 2</a>
     <ul id="sub2" class="subMenu">
        <li><a href="#">Submenu 1</a></li>
        <li><a href="#">Submenu 2</a></li>
        <li><a href="#">Submenu 3</a></li>
        <li><a href="#">Submenu 4</a></li>
      </ul>
    </div>
  </li>
</ul>
于 2013-09-26T13:07:47.337 に答える