2010-04-28 126 views
0

我有一个树形菜单,需要在特定分支上打开。
1.点击一个A元素,我打开所有下一个UL。 现在我想关闭所有其他的UL免除那些A元素的父母。jquery menu ul li

  1. 我想写一个函数,它将得到一个参数,它是一个ID,并将在正确的位置打开菜单。

我jQuery代码

 $(document).ready(function() { 
       $(".solmenu").click(function() { 
       $(this).nextAll("ul").slideToggle(); 

     }); 

我的CSS

ul.solmenu_3140_1 {display:none;} 
ul.solmenu_3140_2 {display:none;} 

我的HTML

<ul class="solmenu_3140_0"> 
     <li> 
     <a class="solmenu" href="javascript:void(0);">1</a> 
    <ul class="solmenu_3140_1"> 
     <li> 
     <a class="solmenu" href="javascript:void(0);">11</a> 
     <ul class="solmenu_3140_2"> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">111</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">112</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">113</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">114</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">115</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">116</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">117</a> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    <ul class="solmenu_3140_1"> 
     <li> 
     <a class="solmenu" href="javascript:void(0);">12</a> 
     <ul class="solmenu_3140_2"> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">121</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">122</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">123</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">124</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">125</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">126</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">127</a> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    <ul class="solmenu_3140_1"> 
     <li> 
     <a class="solmenu" href="javascript:void(0);">13</a> 
     <ul class="solmenu_3140_2"> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">131</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">132</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">133</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">134</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">135</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">136</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">137</a> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 
<ul class="solmenu_3140_0"> 
    <li> 
    <a class="solmenu" href="javascript:void(0);">2</a> 
    <ul class="solmenu_3140_1"> 
     <li> 
     <a class="solmenu" href="javascript:void(0);">21</a> 
     </li> 
     <li> 
     <a class="solmenu" href="javascript:void(0);">22</a> 
     </li> 
    </ul> 
    </li> 
</ul> 
<ul class="solmenu_3140_0"> 
    <li> 
    <a class="solmenu" href="javascript:void(0);">3</a> 
    <ul class="solmenu_3140_1"> 
     <li> 
     <a class="solmenu" href="javascript:void(0);">31</a> 
     </li> 
     <li> 
     <a class="solmenu" href="javascript:void(0);">32</a> 
     </li> 
    </ul> 
    </li> 
</ul> 
<ul class="solmenu_3140_0"> 
    <li> 
    <a class="solmenu" href="javascript:void(0);">4</a> 
    </li> 
    <li> 
    <a class="solmenu" href="javascript:void(0);">5</a> 
    </li> 
    <li> 
    <a class="solmenu" href="javascript:void(0);">6</a> 
    </li> 
    <li> 
    <a class="solmenu" href="javascript:void(0);">7</a> 
    </li> 
    <li> 
    <a class="solmenu" href="javascript:void(0);">8</a> 
    <ul class="solmenu_3140_1"> 
     <li> 
     <a class="solmenu" href="javascript:void(0);">81</a> 
     </li> 
     <li> 
     <a class="solmenu" href="javascript:void(0);">82</a> 
     </li> 
    </ul> 
    </li> 
</ul> 
<ul class="solmenu_3140_0"> 
    <li> 
    <a class="solmenu" href="javascript:void(0);">9</a> 
    <ul class="solmenu_3140_1"> 
     <li> 
     <a class="solmenu" href="javascript:void(0);">91</a> 
     <ul class="solmenu_3140_2"> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">911</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">912</a> 
      </li> 
      <li> 
      <a class="solmenu" href="javascript:void(0);">913</a> 
      </li> 
      </ul> 
     </li> 
    </ul> 
    <ul class="solmenu_3140_1"> 
     <li> 
     <a class="solmenu" href="javascript:void(0);">92</a> 
     </li> 
    </ul> 
    </li> 
</ul> 
<ul class="solmenu_3140_0"> 
    <li> 
    <a class="solmenu" href="javascript:void(0);">10</a> 
    </li> 
</ul> 

example of my code

+0

请在您的问题张贴代码。 – svinto 2010-04-28 09:56:04

+0

如果你想写它,只需继续写下来。如果你不知道如何,那么发布你的代码,我们会把你放在正确的轨道上。 – Prutswonder 2010-04-28 09:59:54

回答