2010-04-28 131 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

回答