JUST ADD:
$(this).siblings().find("ul").slideUp({ duration: 200});
before line:
$(this).children("ul").slideToggle({ duration: 200, queue: false });
Question
I am trying to create a nested sliding list with jQuery. slideToggle
is working properly but i cannot find a way to slideUp
previous <UL>
selection. I would really appreciate any kind of help. Here's my code:
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 });
});
});
Thank you in advance!
Solution
JUST ADD:
$(this).siblings().find("ul").slideUp({ duration: 200});
before line:
$(this).children("ul").slideToggle({ duration: 200, queue: false });
OTHER TIPS
Try
$(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
});
});
});
Demo: Fiddle