JQuery切换内容_Jquery_Toggle_Slidedown_Slideup

JQuery切换内容

jquery

JQuery切换内容,jquery,toggle,slidedown,slideup,Jquery,Toggle,Slidedown,Slideup,我正在尝试制作一个简单的幻灯片到目前为止，我有以下代码： <style type="text/css"> ul { list-style: none; margin: 0; padding: 0; } li { padding-left: 20px; } a { color: #000000; cursor: pointer; t

我正在尝试制作一个简单的幻灯片

到目前为止，我有以下代码：

<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>


保险商实验室{
列表样式：无；
保证金：0；
填充：0；
}
李{
左侧填充：20px；
}
a{
颜色：#000000；
光标：指针；
文字装饰：无；
}
a:悬停{
光标：指针；
}
.首先{
字体系列：佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
字体大小：16px；
字体大小：粗体；
颜色：#C00；
}
.文本{
字体系列：佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
字体大小：14px；
字体：斜体；
字体重量：较轻；
颜色：#666；
}
.分目{
字体系列：佐治亚州，“泰晤士报新罗马”，泰晤士报，衬线；
字体大小：14px；
字体大小：粗体；
颜色：#F90；
}
$（函数（）{
$（'li>ul'）。每个（函数（i）{
//查找此列表的父列表项。
var parent_li=$（this.parent（'li'）；
var sides_li=$（this.parent（'li'）.sides（）；
var sub_ul=$（this）.remove（）；
父函数（“”）。查找（'a'）。单击（函数（）{
//使锚点切换叶显示。
if（sub_ul.is（'：hidden'））{
//兄弟姐妹_li.slideUp（'200'）；
sub_ul.slideDown（'200'）；}
否则{
子幻灯片（'200'）；}
});
父项附加（子项）；
});
//隐藏除最外层以外的所有列表。
$（'ul'）.hide（）；
});

大学课程

我们有多种节目。更多更多更多


节目

我们每个学院都有不同的。。。。。COE如下所示
计算机科学

计算机工程师分析、设计、操作和管理复杂的数字硬件、计算机网络和大型软件系统


电气工程

电气工程师通过分析、设计和实施广泛的系统，影响着社会的各个部门




更多信息

一切都很好，但我希望这样，当我点击一个标题，其他崩溃。即，一次只能看到一个内容。默认情况下，它们都应该最小化（隐藏）。我的问题是，如果显示其中一个内容，如何使其最小化所有其他内容

谢谢

你为什么不使用用户来解决你的问题呢。它有许多方便的配置参数（例如，

animate

来设置更改面板的动画）

它已经被成千上万的人使用了相当长的一段时间，因此您可以确信它经过了良好的测试，应该不会出现任何问题

编辑

您可以将

accordion

添加到顶级元素以及子元素。以你为例：

如果将

id=“topaccordion”

添加到根

元素（
）和id=“subaccordion”
添加到计算机科学
中，则JavaScript函数可能如下所示：
$('#subaccordion').accordion();
$('#topaccordion').accordion();

我已经测试过了，效果很好。您可能需要稍微处理CSS（例如，当鼠标悬停在“clickable”元素上时更改鼠标光标等），但从功能角度来看，accordion可以完成这项工作。
只需在显示所选项目之前隐藏所有项目
<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>


$（函数（）{
//缓存常用选择器
var uls=$（'ul'）；
$（'li>ul'）。每个（函数（i）{
//查找此列表的父列表项。
var parent_li=$（this.parent（'li'）；
var sides_li=$（this.parent（'li'）.sides（）；
var sub_ul=$（this）.remove（）；
父母（“
谢谢你的回复。我测试了JSFIDLE的演示。它工作得很好，只是现在副标题“计算机工程和电气工程”似乎没有扩展。它隐藏了内容。你能告诉我如何修复它吗？谢谢你的回复。我查看了手风琴。我喜欢它，但它似乎不支持（或者我不知道如何）副标题。如果你尝试上面的脚本，有一个副标题（计算机和电气工程）有自己的内容，应该也会出现和消失。你知道我可以用手风琴做吗？如果可以，请你指导我好吗？