如何基於給定的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');

    });
});

小提琴演示