如何基于给定的html结构使用Jquery产生手风琴效果？

Question

我想使用以下结构制作手风琴效果。 这个想法是，当我单击.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();
    });
});

演示版

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

在这里更新代码

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

更新的演示

Answer 2

我相信这就是您要寻找的：

$(".booklist li").click(function(){
  $(this).find("article").slideToggle().end().siblings("li").find("article").slideUp();   
});

JSFIDDLE

Answer 3

您可以使用以下代码进行操作

$("a").click(function(){
    $(this).siblings("article").slideToggle()
       .closest("li").siblings("li").find("article").slideUp();
});

演示

Answer 4

的HTML

<section>
    <ul class="booklist">
        <li> <a href="#">Article Name 1</a>

            <article>
                <p>
                    <content</p>
                        <img class="left" src="myimage" />
                        <p>more content</p>
            </article>
        </li>
        <li> <a href="#">Article Name 2</a>

            <article>
                <p>
                    <content</p>
                        <img class="left" src="myimage" />
                        <p>more content</p>
            </article>
        </li>
        <li> <a href="#">Article Name 3</a>

            <article>
                <p>
                    <content</p>
                        <img class="left" src="myimage" />
                        <p>more content</p>
            </article>
        </li>
    </ul>
</section>

的CSS

ul, li, h4, p {
    margin:0;
}
li {
    list-style:none;
}
.booklist li a {
    cursor: pointer;
}
.booklist li article {
    display: none;
}

脚本

$(document).ready(function ($) {
    $('.booklist').find('a').click(function () {

        //Expand or collapse this panel
        $(this).next().slideToggle('slow');

        //Hide the other panels
        $(".booklist li article").not($(this).next()).slideUp('slow');

    });
});

小提琴演示