Question

周围有很多'巨大'的手风琴脚本，我很困惑。

任何人都可以建议我使用一个简单的代码将此列表转换为手风琴面板。首先，只有“体育”列表可见。然后，当用户点击“技术”或“最新”时，“体育”将隐藏，单击的那个将显示，等等。

<ul id="accordion">
    <li>Sports</li>
    <ul>
        <li><a href="#">Golf</a></li>
        <li><a href="#">Cricket</a></li>
        <li><a href="#">Football</a></li>
    </ul>
    <li>Technology</li>
    <ul>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Twitter</a></li>
    </ul>
    <li>Latest</li>
    <ul>
        <li><a href="#">Obama</a></li>
        <li><a href="#">Iran Election</a></li>
        <li><a href="#">Health Care</a></li>
    </ul>
</ul>

Answer 1

对于快速简单的内容，您可以使用slideToggle()或slideUp() slideDown()

您可能希望清理HTML以便正确嵌套UL：

<ul id="accordion">
    <li>
        <h1>Sports</h1>
        <ul>
            <li><a href="#">Golf</a></li>
            <li><a href="#">Cricket</a></li>
            <li><a href="#">Football</a></li>
        </ul>
    </li>

    <li>
        <h1>Technology</h1>
        <ul>
            <li><a href="#">iPhone</a></li>
            <li><a href="#">Facebook</a></li>
            <li><a href="#">Twitter</a></li>
        </ul>
    </li>

    <li>
        <h1>Latest</h1>
        <ul>
            <li><a href="#">Obama</a></li>
            <li><a href="#">Iran Election</a></li>
            <li><a href="#">Health Care</a></li>
        </ul>
    </li>
</ul>

然后你可以这样做：

$(document).ready(function() {
  // initialise
  $('ul#accordion > li > ul').hide();
  $('ul#accordion > li:first-child > ul').show();

  // accordion
  $('ul#accordion > li > h1').click(function() {
     if($(this).next().css('display') == 'none') {
         $('ul#accordion > li > ul').slideUp();
         $(this).next().slideDown();
     }
  });
});

Answer 2

jquery UI包附带accordion功能，如果您正在使用它（UI是一个非常标准的jquery库，如果有些需要，有点笨拙）。

Answer 3

这个答案使用了OP的原始数据，并满足了他在开始时打开第一个标题的请求（参见下面代码中的注释）。请参阅此处的小提琴：jQuery-ui accordion example on JSFiddle

我使用了这里的示例：jQuery-ui accordion docs

    <!DOCTYPE html>
    <html>
    <head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">     </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script>
    $(document).ready(function() {
$("#accordion").accordion({
    clearstyle: true,
collapsible: true, //allow accordion to be completely collapsed showing only the headers.
    active: 0 //open first accordion (Sports) on load
        });
    });
    </script>
    </head>
    <body style="font-size:62.5%;">

    <div id="accordion">
    <h3><a href="#">Sports</a></h3>
    <div>
    <ul>
        <li>Golf</li>
        <li>Cricket</li>
        <li>Football</li>
    </ul>
</div>
<h3><a href="#">Techology</a></h3>
<div>
    <ul>
        <li>iPhone</li>
        <li>Facebook</li>
        <li>Twitter</li>
    </ul>
</div>
<h3><a href="#">Latest</a></h3>
<div>
    <ul>
        <li>Obama</li>
        <li>Iran Election</li>
        <li>Health Care</li>
    </ul>
</div>
    <h3><a href="#">Attribution</a></h3>
<div>
    <p><a href="http://stackoverflow.com/questions/2657469/accordion-effect">In answer to Stack Overflow question 2657469</a></p>
   </div>
   </div>
   </body>
   </html>

手风琴效应

3 个答案: