JQuery切换内容
JQuery切换内容
提问于 2013-01-02 22:04:11
我正在尝试创建一个简单的slideUp slideDown内容
到目前为止，我有以下代码：
<style type="text/css">
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
padding-left: 20px;
}
a {
color: #000000;
cursor: pointer;
text-decoration: none;
}
a:hover {
cursor:pointer;
}
.first {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #C00;
}
.text {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-style: italic;
font-weight: lighter;
color: #666;
}
.subhead {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
color: #F90;
}
</style>
<script language="JavaScript" type="text/JavaScript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('li > ul').each(function(i) {
// Find this list's parent list item.
var parent_li = $(this).parent('li');
var siblings_li = $(this).parent('li').siblings();
var sub_ul = $(this).remove();
parent_li.wrapInner('<a/>').find('a').click(function() {
// Make the anchor toggle the leaf display.
if (sub_ul.is(':hidden')){
//siblings_li.slideUp('200');
sub_ul.slideDown('200');}
else {
sub_ul.slideUp('200');}
});
parent_li.append(sub_ul);
});
// Hide all lists except the outermost.
$('ul ul').hide();
});
</script>
</head>
<body>
<ul>
<li><span class="first">College Programs
</span>
<ul>
<li class="text">We have a variety of programs. more more more more more more more more more more more</li>
</ul>
</li>
<li><span class="first">Programs
</span>
<ul>
<li class="text">Each of our Colleges have various ..... COE shown below.</li>
<li><span class="subhead">Computer Science
</span>
<ul>
<li>Computer engineers analyze, design, operate and manage complex digital hardware, computer networks and large-scale software systems.</li>
</ul>
</li>
<li><span class="subhead">Electrical Engineering
</span>
<ul>
<li>Electrical engineers influence various sectors of society by analyzing, designing and implementing a wide range of systems.</li>
</ul>
</li>
</ul>
</li>
<li class="first">More Info</li>
</ul>一切都很好，但是我希望当我点击一个标题时，其他标题就会崩溃。也就是说，一次只能看到一个内容。默认情况下，它们都应该最小化(隐藏)。我的问题是，我如何才能使它最小化所有其他内容，如果它们中的一个显示。
谢谢!
回答 2
Stack Overflow用户
发布于 2013-01-02 22:08:13
你为什么不使用jQuery Accordion来解决你的问题呢？它有很多方便的配置参数(例如，用animate来动画改变面板)。
The library已经被成千上万的人使用了相当长的一段时间，所以你可以相信它经过了良好的测试，应该不会有任何问题。
编辑
您可以将accordion添加到顶级元素和子元素中。以你的例子为例：
如果将id="topaccordion"添加到根<ul>元素(<ul id="topaccordion">)，并将id="subaccordion"添加到<li id="subaccordion"><span class="subhead">Computer Science</span>，则JavaScript函数可能如下所示：
$('#subaccordion').accordion();
$('#topaccordion').accordion();我已经测试过了，它工作得很好。您可能需要在CSS上做一些工作(例如，当鼠标悬停在“可点击”元素上时更改鼠标光标等)。但从功能的角度来看，accordion可以完成这项工作。
Stack Overflow用户
发布于 2013-01-02 22:16:36
只需在显示所选项目之前隐藏所有项目。
<script>
$(function() {
// Cache commonly used selectors
var uls = $('ul ul');
$('li > ul').each(function(i) {
// Find this list's parent list item.
var parent_li = $(this).parent('li');
var siblings_li = $(this).parent('li').siblings();
var sub_ul = $(this).remove();
parent_li.wrapInner('<a/>').find('a').click(function() {
// Hide all items first
uls.slideUp('200');
// Make the anchor toggle the leaf display.
if (sub_ul.is(':hidden')) {
//siblings_li.slideUp('200');
sub_ul.slideDown('200');
}
else {
sub_ul.slideUp('200');
}
});
parent_li.append(sub_ul);
});
// Hide all lists except the outermost.
uls.hide();
});
</script>演示：http://jsfiddle.net/MmG7a/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14123451
复制相关文章
相似问题
腾讯云开发者
