Javascript 单击下一个菜单关闭子菜单

我有以下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>

函数HideandUNhideObj（ThisObj）{
nav=document.getElementById（ThisObj）.style
如果（导航显示=“无”）{
导航显示class='block'；
}否则{
导航显示='无'；
}
}

对于菜单和子菜单，我有以下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打开，则菜单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>

//

如果要打开菜单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>

//

如果您有不止两个子菜单，@Ashish的答案不是很好扩展

我对您的代码进行了一些修改，得到了如下结果：

函数HideandUNhideObj（子菜单ID）{
隐藏子菜单（）；
显示子菜单（子菜单ID）；
}
函数HIDEALSSUBMENUS（）{
var submenus=document.getElementsByClassName（“子菜单”）；
对于（变量i=0；i

我更改了处理程序，使其首先关闭所有子菜单，然后打开必要的子菜单。 也可以考虑使用jQuery或类似的库，如果你在你的应用程序中使用JS，它会简化很多东西。 也可以考虑重构代码：

现在，脚本标记不需要使用语言属性

在声明局部变量时使用var

---

如果您有不止两个子菜单，@Ashish的答案不是很好扩展

我对您的代码进行了一些修改，得到了如下结果：

函数HideandUNhideObj（子菜单ID）{
隐藏子菜单（）；
显示子菜单（子菜单ID）；
}
函数HIDEALSSUBMENUS（）{
var submenus=document.getElementsByClassName（“子菜单”）；
对于（变量i=0；i

我更改了处理程序，使其首先关闭所有子菜单，然后打开必要的子菜单。 也可以考虑使用jQuery或类似的库，如果你在你的应用程序中使用JS，它会简化很多东西。 也可以考虑重构代码：

现在，脚本标记不需要使用语言属性

在声明局部变量时使用var

中的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>

函数隐藏（一）
{ 
var elements=document.getElementsByClassName（“子菜单”）；
对于（var k=0；k

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>

中的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>

函数隐藏（一）
{ 
var elements=document.getElementsByClassName（“子菜单”）；
对于（var k=0；k

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>

u想要文字菜单1打开，则文字菜单2必须隐藏，反之亦然？u想要文字菜单1打开，则文字菜单2必须隐藏，反之亦然？