Question

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

一切正常，但我希望如此，当我点击一个标题时，其他标题会崩溃。即，一次只能看到一个内容。默认情况下，它们都应该最小化（隐藏）。我的问题是如何才能使它最大限度地减少所有其他内容（如果显示其中一个）。

谢谢！

Answer 1

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

The library已经被成千上万的人使用了相当长的一段时间，所以你可以确信它经过了充分的测试，并且可以毫无问题地工作。

修改

您可以将accordion添加到顶级元素以及子元素。举个例子：

如果您将id="topaccordion"添加到根<ul>元素（<ul id="topaccordion">）和id="subaccordion"添加到<li id="subaccordion"><span class="subhead">Computer Science</span>，那么您的JavaScript函数可能如下所示：< / p>
$('#subaccordion').accordion(); $('#topaccordion').accordion();

我测试了它并且它工作正常。您可能需要稍微处理CSS（例如，当悬停在“可点击”元素上时更改鼠标光标等），但从功能角度accordion完成工作。

Answer 2

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

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

JQuery切换内容

2 个答案: