我有一个像这样的树列表:-
<ul class="firstLevel">
<li class="category"> <a href="level1.php">Level 1</a>
<ul>
<li class="category"> <a href="level2.php">Level 2</a>
<ul>
<li class="category"><a href="level3.php">Level 3</a>
<ul>
<li><a href="level4.php">Level 4</a></li>
</ul>
</li>
</ul>
</li>
<li class="category"><a href="level2a.php">Level 2 a </a></li>
</ul>
</li>
</ul>
问题是,当我将一个类分配给 <li>
时然后页面重新加载,分配的CSS将消失,因为它会转到另一个页面(我不会在这个页面使用ajax,它是在系统中完成的页面,更改它将会改变许多其他部分,因此现在将不得不重新加载整个页面)。
下面是我的js:-
$('li.category').addClass('plusimageapply');
$('li.category').children().addClass('selectedimage');
$('li.category').children().hide();
$("ul.firstLevel li a").css("display", "block");
$('li.category').each(
function(column) {
$(this).click(function(event){
if($(this).is('.plusimageapply')) {
//collapse other category and expand its children.
$('li.category').children().hide();
} else {
$(this).children().hide();
$(this).removeClass('minusimageapply');
$(this).addClass('plusimageapply');
}
});
}
);
如何实现上面 TreeView 的展开/折叠?会有很多层次。预先感谢您。
最佳答案
你可以使用这样的东西
$('li.category').addClass('plusimageapply');
$('li.category').children().addClass('selectedimage');
$('li.category').children().hide();
$("ul.firstLevel li a").css("display", "block");
$('li.category > a').click(function(e){
e.preventDefault();
e.stopPropagation();
if($(this).hasClass('minusimageapply')) {
//collapse other category and expand its children.
$(this).next('ul').hide();
$(this).removeClass('minusimageapply').addClass('plusimageapply');
} else {
$(this).next('ul').show();
$(this).removeClass('plusimageapply').addClass('minusimageapply');
}
});
关于javascript - 展开折叠树,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34228354/