手風琴效應

有這麼多'巨大的'手風琴劇本，我很困惑。手風琴效應

任何人都可以建議我一個簡單的代碼將此列表變成手風琴面板。首先，只有「體育」列表將會顯示。然後，當對技術或者最新的用戶點擊，體育將隱藏和一個點擊會顯示等..

<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

回答

相關問題