如何使用Jquery在给定的html结构的基础上产生手风琴效果

How to make an accordion effect using Jquery based on a given html structure?

本文关键字：基础上 结构 手风琴效果 html Jquery 何使用      更新时间：2023-09-26

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

尝试此

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

更新的演示

我相信这就是您想要的：

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

JSFIDDLE

您可以使用以下代码

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

DEMO

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');
    });
});

Fiddle演示

相关文章：