Question

我想做一个手风琴式的向下滚动，但是当我点击“Header 1”（例如）时，它会向下滚动，然后再向上滚动。我需要它以便它向下滚动，并且当我再次单击它时（或当我点击不同的标题时）仅向上滚动。此外，当我的页面加载时，所有标题都向下滚动，这是我不想要的。我该怎么做才能解决这个问题？

<style>
   .accord-content { display: none; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".accordion .accord-header").click(function() {
            if($(this).next("div").is(":visible")){
                $(this).next("div").slideUp("slow");
            } else {
                $(".accordion .accord-content").slideUp("slow");
                $(this).next("div").slideToggle("slow");
            }
        });
    });
</script>
<div class="accordion">
  <div class="accord-header">Header 1</div>
  <div class="accord-content">Link 1</div>
  <div class="accord-header">Header 2</div>
  <div class="accord-content">Link 2</div>
</div>

Answer 1

您在CSS中错误地引用了accord-content类。删除'＃'

.accord-content { display: none; }

我不确定我是否理解其余的问题，其他一切似乎都在按照您的描述运作，除非我误解了您想要的行为。

Codepen示例：http://cdpn.io/FeKyz

Answer 2

尝试为两个不同的动作创建两个不同的函数，然后使用bind和unbind。

function slideAccordianDown() {
    $(this).next("div").slideDown("slow");
    $(this).unbind("click");
    $(this).bind("click", slideAccordianUp);
};

function slideAccordianUp() {
    $(this).next("div").slideUp("slow");
    $(this).unbind("click");
    $(this).bind("click", slideAccordianDown);
};

$(document).ready(function() {
    $(".accordion .accord-header").click(slideAccordianDown);
});

执行此操作将删除滑动并停止它的功能，然后绑定功能以将其滑回。

JavaScript中的自定义手风琴脚本

2 个答案: