javascript - 如何根据给定的 html 结构使用 Jquery 制作 Accordion 效果？

Question

我想使用以下结构制作 Accordion 效果。这个想法是，当我点击 .booklist>li>a 时，它会切换相应的文章，并且一次只能打开一篇文章。谁能帮我写这个脚本？欢迎使用 Jquery。

http://jsfiddle.net/vinicius5581/r2zevb3d/1/

CSS

 article{
     display:none;
 }

HTML

<section>
<ul class="booklist">
     <li>
         <a>Article Name 1</a>
         <article>                        
              <p><content</p>
              <img class="left" src="myimage"/>
              <p>more content</p>
          </article>
     </li>
     <li>
         <a>Article Name 2</a>
         <article>                        
              <p><content</p>
              <img class="left" src="myimage"/>
              <p>more content</p>
          </article>
     </li>
     <li>
         <a>Article Name 3</a>
         <article>                        
              <p><content</p>
              <img class="left" src="myimage"/>
              <p>more content</p>
          </article>
     </li>

Answer 1

试试这个

$(document).ready(function(){
    $('.booklist>li>a').click(function(){
        $('.booklist>li>a + article').slideUp();
        $(this).next('article').slideDown();
    });
});

Demo

--------------------

此处更新代码

$(document).ready(function(){
    $('.booklist>li>a').click(function(){
        $(this).next('article').slideToggle();
        $(this).closest('li').siblings('li').find('article').slideUp();
    });
});

Updated Demo