0

順序付けされていないリストにjqueryslidetoggleエフェクトを作成しようとしています。オンに切り替わりますが、すぐに上にスライドします。それが私の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/

4

1 に答える 1

0

この例を参照してください...

jsfiddle

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

ご挨拶。

于 2013-01-09T12:58:29.757 に答える