手风琴效应

有这么多'巨大的'手风琴剧本，我很困惑。手风琴效应

任何人都可以建议我一个简单的代码将此列表变成手风琴面板。首先，只有“体育”列表将会显示。然后，当对技术或者最新的用户点击，体育将隐藏和一个点击会显示等..

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

来源

2010-04-17 Veejay

对于一些快速和简单，你可以使用slideToggle()或slideUp()slideDown()

您可能要清理你的HTML，使上行线路正确嵌套：

888

然后，你可以做这样的事情：

$(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(); 
    } 
    }); 
});

来源

2010-04-17 06:20:49 digitaldreamer

jQuery UI包带有accordion功能，如果你想使用它（UI是一个非常标准的jQuery库，如果某些需求有点笨重）。

来源

2010-04-20 19:02:51 keithjgrant

本答案使用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>

来源

2012-05-24 23:16:17 delliottg

回答

相关问题