希望你们一切都好。有谁知道当您打开下一部分时如何关闭上面或下面的树项目？因此，当您打开下一部分时，原始部分将关闭。 (希望这是有道理的)。
请参阅下面的代码和显示正在运行的代码的 codepen ( http://cdpn.io/FDcBm )
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
ul {list-style-type: none}
ul li {margin-bottom: 0; padding-left: 1.5em}
.closed {background: url('http://www.planeswalkerslibrary.com/images/plus_icon.jpg') no-repeat 0 0; }
.open {background: url('http://www.planeswalkerslibrary.com/images/minus_icon.jpg') no-repeat 0 0;}
a {color:#0000FF;} /* unvisited link */
a:visited {color:#0000FF;} /* visited link */
a:hover {color:#0000FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>
<body>
<font face="verdana" size = 2>
<font size=3 color=#000080><b>Testing</b></font>
</br>
<hr>
</br>
Please choose the Test Item Below:
<ul>
<li><b>I have submitted a Test Car</b>
<ul>
<li>Error discovered in the same test
<ul>
<li>Underpayment
<ul>
<li><a href=test.html target="_blank">Error discovered before you test</a></li>
</ul>
<ul>
<li><a href=test.html target="_blank">Error discovered after Test</a> (e.g. you notice a test)</li>
</ul>
</ul>
</li>
<ul>
<li><a href=test.html target="_blank">Testing</a></li>
</ul>
</li>
</ul>
<ul>
<li>Errors discovered in the test
<ul>
<li>Error discovered on or before the test
<ul>
<li>Underpayment
<ul>
<li><a href=test.html target="_blank">Error discovered before you test</a></li>
</ul>
<ul>
<li><a href=test.html target="_blank">Error discovered after you test<a/> (e.g. you notice an error in a test)</li>
</ul>
</li>
</li>
</ul>
<ul>
<li><a href=test.html target="_blank">Overtest</a></li>
</ul>
</ul>
</li>
<ul>
<li><a href=test.html target="_blank">Error discovered on test</a></li>
</ul>
</ul>
</li>
</li>
<li><b>I have submitted a test</b>
<ul>
<li><a href=test.html target="_blank">Incorrect date in test</a></li>
</ul>
<ul>
<li><a href=test.html target="_blank">Incorrect date in the same test</a> (NOTE: a test)</li>
</ul>
<ul>
<li><a href=test.html target="_blank">Incorrect test</a></li>
</ul>
</li>
<li><b><a href=test.html target="_blank">I have missed a test (and have submitted a test)</a></b></li>
<li><b>I have submitted a test</b>
<ul>
<li>Wrong test</li>
</ul>
<ul>
<li>Wrong testy test</li>
</ul>
<ul>
<li>Wrong mega test</li>
</ul>
<ul>
<li>Wrong super test</li>
</ul>
<ul>
<li>Super test</li>
</ul>
<ul>
<li>Wrong mega super test</li>
</ul>
<ul>
<li>Wrong Date of test</li>
</ul>
<ul>
<li>Wrong Cat</li>
</ul>
<ul>
<li>Wrong ultra test</li>
</ul>
<ul>
<li>Wrong master test</li>
</ul>
<ul>
<li>Wrong testy test</li>
</ul>
<ul>
<li>Wrong tester test</li>
</ul>
</li>
</ul>
<script type="text/javascript">
$(function(){
$('li').has('ul').click(function(event){
if(this == event.target)
{
$(this).toggleClass('open');
$(this).children('ul').toggle();
}
})
.addClass('closed')
.children('ul').hide();
});
</script>
</font>
</body>
</html>
最佳答案
使用插件:collapse accordian .
UDP日期:
没有使用 .siblings() 方法的插件:jsfiddle
只需添加这些代码行:
if ($(this).siblings().hasClass('open')) {
$(this).siblings().addClass('closed').removeClass('open').children('ul').hide();
}
关于javascript - 当我打开下一个项目时，如何使上面的树列表项目自动关闭？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18215355/