2014-01-25 5 views
1

Я пытаюсь создать вложенный скользящий список с jQuery. slideToggle работает нормально, но я не могу найти способ до slideUp предыдущий <UL> выбор. Я бы очень признателен за любую помощь. Вот мой код:jQuery slideUp UL предыдущий выбор

HTML:

<ul> 
    <li>100 
     <ul> 
      <li>110 
       <ul> 
        <li>111</li> 
        <li>112</li> 
        <li>113</li> 
       </ul> 
      </li> 
      <li>120 
       <ul> 
        <li>121</li> 
        <li>122</li> 
        <li>123</li> 
       </ul> 
      </li> 
      <li>130 
       <ul> 
        <li>131</li> 
        <li>132</li> 
        <li>133</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li>200 
     <ul> 
      <li>210 
       <ul> 
        <li>211</li> 
        <li>212</li> 
        <li>213</li> 
       </ul> 
      </li> 
      <li>220 
       <ul> 
        <li>221</li> 
        <li>222</li> 
        <li>223</li> 
       </ul> 
      </li> 
      <li>230 
       <ul> 
        <li>231</li> 
        <li>232</li> 
        <li>233</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li>300 
     <ul> 
      <li>310 
       <ul> 
        <li>311</li> 
        <li>312</li> 
        <li>313</li> 
       </ul> 
      </li> 
      <li>320 
       <ul> 
        <li>321</li> 
        <li>322</li> 
        <li>323</li> 
       </ul> 
      </li> 
      <li>330 
       <ul> 
        <li>331</li> 
        <li>332</li> 
        <li>333</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

JQuery:

$(document).ready(function() { 
    var item = [0, 0, 0]; 
    $("li").click(function(e) { 
     e.stopPropagation(); 
     var lvl = $(this).parents('ul').length; 
     var idx = $(this).index() + 1; 
     var prev = item; 
     switch (lvl) { 
      case 1: item = [idx, 0, 0]; break; 
      case 2: item = [item[0], idx, 0]; break; 
      case 3: item = [item[0], item[1], idx]; break; 
     } 
     console.log('prev:' + prev + ' - new:' + item); 
     // $('.menu ul').eq(item[0]).find('ul').eq(item[1]).find('ul').eq(item[2]).slideUp(); 
     $(this).children("ul").slideToggle({ duration: 200, queue: false }); 
    }); 
}); 

This is my code on fiddle

Спасибо заранее!

ответ

0

JUST ADD:

 $(this).siblings().find("ul").slideUp({ duration: 200}); 

перед строкой:

$(this).children("ul").slideToggle({ duration: 200, queue: false }); 
+0

Удивительный! Лишь эта работа будет работать. : D – user3235263

+0

Единственная причина, по которой я предпочитаю решение Arun, состоит в том, что он также переместит каждый поднабор ранее открытого списка. – user3235263

+0

Я обновил код, который вы можете использовать $ (this) .siblings(). Find ("ul"). SlideUp ({продолжительность: 200}); –

0

Попробуйте

$(document).ready(function() { 
    var $uls = $('ul ul'); 
    $("li").has('ul').click(function (e) { 
     e.stopPropagation(); 
     $uls.not($(this).parents('ul')).slideUp({ 
      duration: 200, 
      queue: false 
     }); 
     $(this).children("ul").slideToggle({ 
      duration: 200, 
      queue: false 
     }); 
    }); 
}); 

Демо: Fiddle

+0

Это идеальный вариант !! Огромное спасибо. – user3235263