-2

我想做一个手风琴式的向下和向上滚动，但是当我点击“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>
4

2 回答 2

2

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

.accord-content { display: none; }

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

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

于 2013-08-16T22:12:50.260 回答
0

尝试为两个不同的操作创建两个不同的函数，然后使用绑定和取消绑定。

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);
});

这样做将删除向下滑动并停止它的功能，然后绑定该功能以将其向上滑动。

于 2013-08-17T00:27:19.247 回答