0

我正在尝试在无序列表上创建 jquery 幻灯片切换效果。它会打开，但随后会立即向上滑动。我无法弄清楚它是我的 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();
});

和 ..

   <!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 回答