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>

すべて正常に動作しますが、1 つのタイトルをクリックすると他のタイトルが折りたたまれるようにしたいと考えています。つまり、一度に 1 つのコンテンツしか見ることができません。デフォルトでは、すべて最小化 (非表示) にする必要があります。私の問題は、それらのいずれかが表示されている場合、他のすべてのコンテンツを最小化するようにするにはどうすればよいかです。

ありがとう！

4

2 に答える 2

2

jQuery アコーディオンを使用して問題を解決してみませんか。多くの便利な設定パラメータがあります (animate変更するパネルをアニメーション化するなど)。

ライブラリはかなり長い間何千人もの人々によって使用されてきたので、十分にテストされており、問題なく動作するはずです.

編集

accordion子要素だけでなく、最上位要素にも追加できます。あなたの例を取る：

id="topaccordion"をルート<ul>要素 ( <ul id="topaccordion">)に追加すると、JavaScript 関数は次のようid="subaccordion"に<li id="subaccordion"><span class="subhead">Computer Science</span>なります。

$('#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 に答える