首页 文章

Jquery手风琴

提问于
浏览 次
1

我正在使用以下功能来展示我的手风琴

<script type="text/javascript">
$(document).ready(function(){

    $(".accordion h3:first").addClass("active");
    $(".accordion div:not(:first)").hide();

    $(".accordion h3").click(function(){
        $(this).next("div").slideToggle("fast")
        .siblings("div:visible").slideDown("fast");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });

});
</script>

所以第一个手风琴是在页面加载时打开然后当我点击任何其他手风琴时，一个已经打开并且另一个也打开，前一个只在我点击它时关闭 . 我希望实现的是在点击下一个手风琴时关闭之前的手风琴 . 任何人都可以帮我重组这个功能 . 非常感谢

jquery jquery-plugins accordion jquery-ui-accordion

5 回答

  • 0

    在这个视频中__http://tutsplus.com/lesson/events-201/ Jeffrey Way创造了一个简单的手风琴，我猜它对你有帮助 .

    回复于
  • 0
    <script type="text/javascript>
$(".accordion h3").click(function(){
    $('.accordion h3').each(function () {
      $(this).next("div").slideUp('slow');
    }
    $(this).next("div").slideToggle("fast")
    .siblings("div:visible").slideDown("fast");
    $(this).toggleClass("active");
    $(this).siblings("h3").removeClass("active");
});
</script>
    回复于
  • 0
    <div class="accordion">
<h3 class="accordion-title">Title</h3>
<div class="accordion-content">text</div>
</div>

<script type="text/javascript"> 
jQuery(document).ready(function($){
        $('.accordion-title').click(function(){
        $(this).parent().children('.accordion-content').slideToggle();
        $(this).toggleClass('open');
        });
}); </script>
    回复于
  • 0
    $(".title_div").click(function(){
        $('.content_div').slideUp();
        if($(this).next().is(":visible")){
            $(this).next().slideUp();    
        }else{
            $(this).next().slideDown();
        }
    });

    .title_div{ display:block; padding:10px 20px; border:1px solid #ddd;}

.content_div{ display:none; padding:20px;}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="box">    
  <div class="title_div">
    title
  </div>
  <div class="content_div">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since th
  </div>
  <div class="title_div">
    title
  </div>
  <div class="content_div">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since th
  </div>
  <div class="title_div">
    title
  </div>
  <div class="content_div">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since th
  </div>
</div>

    Demo here

    回复于
  • 0

    一个非常简单的手风琴（没有手风琴容器）：

    https://jsfiddle.net/iocron/mu4jg67n/3/

    $(".acc-content").hide();
$(".acc-toggler").on("click",function(e){
	var accContent = $(this).next(".acc-content");
  
	$(".acc-content").not(accContent).slideUp();
	accContent.slideToggle();
});

    body,* { margin:0; padding:0; }
body { line-height:1; }

.acc-toggler { padding:10px 12px; border-bottom:1px solid #ccc; background:#ddd; cursor:pointer; }
.acc-content { padding:10px 12px; background:#eee; }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <h3 class="acc-toggler">Accordion 1</h3>
  <div class="acc-content">Text Content 1</div>
  <h3 class="acc-toggler">Accordion 2</h3>
  <div class="acc-content">Text Content 2</div>
  <h3 class="acc-toggler">Accordion 3</h3>
  <div class="acc-content">Text Content 3</div>
</div>
    回复于

相关问题