1

我正在尝试制作一个简单的 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>

一切正常，但是我希望这样当我单击一个标题时，其他标题就会崩溃。即，一次只能看到一个内容。默认情况下，它们都应该被最小化（隐藏）。我的问题是如何制作它，以便在显示其中一个内容时最小化所有其他内容。

谢谢！

4

2 回答 2

2

你为什么不使用jQuery Accordion来解决你的问题。它有很多方便的配置参数（例如animate动画更改面板）。

该库已被数千人使用了相当长的一段时间，因此您可以确信它经过了良好的测试并且应该可以正常工作。

编辑

您可以添加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可以完成这项工作。

于 2013-01-02T14:08:13.000 回答
1

只需在显示所选项目之前隐藏所有项目。

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

于 2013-01-02T14:16:36.237 回答