文章/答案/技术大牛

发布

社区首页 >问答首页 >手风琴效果

问手风琴效果
EN

Stack Overflow用户

提问于 2010-04-17 14:15:27

回答 3查看 471关注 0票数 0

手风琴手风琴手稿太多了，我很困惑。

有没有人能给我一个简单的代码把这个列表变成一个手风琴面板。首先，只有“体育”列表是可见的。然后，当用户点击Technology或Latest时，Sports将隐藏，而被点击的将显示出来，以此类推。

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

jquery

回答 3

Stack Overflow用户

发布于 2010-04-17 14:20:50

对于快速而简单的东西，您可以使用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();
     }
  });
});

票数 2

Stack Overflow用户

发布于 2010-04-21 03:02:52

jquery UI包附带了accordion功能，如果您愿意使用该功能的话(UI是一个非常标准的jquery库，但对于某些需要来说有点笨拙)。

票数 0

Stack Overflow用户

发布于 2012-05-25 07:16:17

这个答案使用了OP的原始数据，并满足了他在开头打开第一个标题的请求(参见下面代码中的注释)。请在此处查看fiddle：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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/2657469

复制

相似问题

问手风琴效果
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问手风琴效果EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问手风琴效果
EN