我正在使用 jquery 制作文件浏览器。我想重新确定哪个 li 中有一个类文件。但它也将子菜单重新整理为一个文件。
我究竟做错了什么?
查询:
$(document).ready(function() {
$("#accordion > li").click(function() {
if (!$(this).hasClass("active")) {
// Remove the class from anything that is active
$("li.active").removeClass("active");
// And make this active
$(this).toggleClass("active");
/*$('li').removeClass('active');
$(this).addClass('active');*/
}
if (false == $(this).next().is(':visible')) {
$('#accordion > ul').slideUp(300);
}
if ($('li:first-child').hasClass('file')) {
console.log("Is file");
// handle as file
} else {
$(this).next().slideToggle(300);
}
});
$("#accordion > ul li").click(function() {
/*$('#accordion > ul li').removeClass('active');*/
$(this).addClass('active');
if (false == $(this).next().is(':visible')) {
$('#accordion > ul li ul').slideUp(300);
}
if ($('li:first-child').hasClass('file')) {
console.log("Is file");
} else {
$(this).next().slideToggle(300);
}
});
$('.top:even').addClass('stripe');
$('#accordion ul li:odd').addClass('stripe');
$('#accordion ul li ul li:even').addClass('stripe');
});
菜单:
<div id="menu">
<ul id="accordion">
<li class="top">
<a href="#"><img src="images/folder-icon.png" />Sports</a>
</li>
<ul>
<li>
<a href="#"><img src="images/folder-icon.png" />Golf</a>
</li>
<ul>
<li>
<a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem 1</a>
</li>
<li>
<a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem 2</a>
</li>
<li>
<a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem 3</a>
</li>
<li>
<a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem 4</a>
</li>
</ul>
<li>
<a href="#"><img src="images/folder-icon.png" />Cricket</a>
</li>
<ul>
<li>
<a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem</a>
</li>
<li>
<a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem</a>
</li>
<li>
<a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem</a>
</li>
<li>
<a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem</a>
</li>
</ul>
<li>
<a href="#"><img src="images/folder-icon.png" />Football</a>
</li>
</ul>
<li class="top">
<a href="#"><img src="images/pdf-folder-icon.png" />Technology</a>
</li>
<ul>
<li>
<a class="file" href="#">iPhone</a>
</li>
<li>
<a class="file" href="#">Facebook</a>
</li>
<li>
<a class="file" href="#">Twitter</a>
</li>
</ul>
<li class="top">
<a href="#"><img src="images/pdf-folder-icon.png" />Latest</a>
</li>
<ul>
<li>
<a class="file" href="#">Obama</a>
</li>
<li>
<a class="file" href="#">Iran Election</a>
</li>
<li>
<a class="file" href="#">Health Care</a>
</li>
</ul>
</ul>
</div><!--- menu --->