Question

我正在尝试在无序列表上创建jquery slidetoggle效果。它会切换，然后立即滑回。我无法弄清楚它是不是我的css，还是我的jquery。顺便说一下，由于某种原因，我无法使用我的jsfiddle，因此jsfiddle只是我的css，html和jquery的视图。这是我正在使用的jquery：

function accordionLoad() {

    $(".accordion-header").removeClass("expanded");
    $(".accordion-content").hide();

    $(".accordion-header").bind("click", function(){
        $(this).toggleClass("expanded");
        $(this).next(".accordion-content").slideToggle();
    })

    $(".expand-all").bind("click",function(){
        $(this).siblings(".accordion").find(".accordion-content").slideDown();
        $(this).siblings(".accordion").find(".accordion-header").addClass("expanded");
    })

    $(".collapse-all").bind("click",function(){
        $(this).siblings(".accordion").find(".accordion-content").slideUp();
        $(this).siblings(".accordion").find(".accordion-header").removeClass("expanded");
    })
}

$(document).ready(function(){
    accordionLoad();
});

和html ..

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<meta name="Microsoft Theme" content="HDRDefault 1011, default" />

</head>
<body> 
<div class="container">
  <div class="expand-all">Expand All</div><div class="collapse-all">Collapse All</div>
  <UL class="accordion">
    <LI class="accordion-item">
      <DIV class="accordion-header">Question2</DIV>
      <DIV class="accordion-content">
        <DIV class="Externa">Answer2..Answer2..Answer2..Answer2..Answer2..Answer2..Answer2..</DIV>      
      </DIV>
    </LI>

    <LI class="accordion-item">
      <DIV class="accordion-header">Question12</DIV>
      <DIV class="accordion-content">
        <DIV class="Externa">Answer12..Answer12..Answer12..Answer12..Answer12..Answer12..Answer12..</DIV>      
      </DIV>
    </LI>  
  </UL>
  </div>  
</body>
</html>

这是jsfiddle： http://jsfiddle.net/9CNeX/8/

Answer 1

见这个例子......

jsfiddle

$('.accordion-header').on('click', function(e){
  $(this).next().slideToggle();
});

问候。

jquery slidetoggle不会保持切换状态

1 个答案: