Question

我有这个JSfiddle：https://jsfiddle.net/07fdq3t1/5/

它几乎是完美的，除了我想把它以动画的方式显示在内容的地方。现在它只是弹出，但我想让它慢慢打开。使其进入视口顶部的动画效果很好，但我需要它来到有人点击元素的地方，内容会慢慢打开。

有什么想法吗？

<script>
$(document).ready(function() {
    $('.accordion').click(function(){
        if($(this).next('.container').is(':visible')) {
            $(this).removeClass('show');
            $(this).next('.container').slideUp();
        }
        else {
            $('.accordion').find('.container:visible').slideUp();
            $('.accordion').removeClass('show');
            $(this).addClass('show');
            $(this).next('.container').slideDown();
            $('html, body').animate({
                scrollTop: $(this).offset().top
            }, 200);
        }         
    });
});
</script>

<div class="accordion">Heading<span></span></div>
    <div class="container">
        <div class="content">
            <div>Sample Content</div>
            <p>Content here....</p>
        </div>
    </div>
<div class="accordion">Heading<span></span></div>
    <div class="container">
        <div class="content">
            <div>Sample Content</div>
            <p>Content here....</p>
        </div>
    </div>

Answer 1

是的，只需使用[和slideUp()方法，而不是简单地添加slideDown()类。

Updated fiddle here

Answer 2

好的。这是我尝试解决您的问题。看看下面的小提琴或片段。

JSFiddle

<强> 段：

＆＃13;

var accordions=null;
var containers=null;
var slideDuration=400;
var scrollDuration=400;
var body=null;
var classNameShow='show';
var classNameAccordion='.accordion';
var classNameContainer='.container';
var dataOffsetTop='offsetTop';
$(document).ready(function(){
	body=$('html, body');
	accordions=$(classNameAccordion);
	containers=$(classNameContainer);
	accordions.each(function(){
		var openedAccordions=accordions.filter(function(){return $(this).hasClass(classNameShow);});
		openedAccordions.removeClass(classNameShow);
		$(this).data(dataOffsetTop,$(this).offset().top);
		openedAccordions.next(classNameContainer).stop(true).slideDown({
			duration:slideDuration,
			complete:function(){openedAccordions.addClass(classNameShow);}
		});
	});
	accordions.click(function(){
		var currentAccordion=$(this);
		var currentContainer=$(this).next(classNameContainer);
		var openedAccordions=accordions.filter(function(){return $(this).hasClass(classNameShow);});
		if(!currentAccordion.hasClass(classNameShow)){
			currentContainer.stop(true).slideDown({
				duration:slideDuration,
				complete:function(){currentAccordion.addClass(classNameShow);}
			});
			body.stop(true).animate({scrollTop:currentAccordion.data(dataOffsetTop)},scrollDuration);
		}else{
			currentContainer.stop(true).slideUp({
				duration:slideDuration,
				complete:function(){currentAccordion.removeClass(classNameShow);}
			});
		}
		containers.not(currentContainer).stop(true).slideUp({
			duration:slideDuration,
			complete:function(){openedAccordions.removeClass(classNameShow);}
		});
	});
});

＆＃13;

.accordion {
	margin: 0;
	padding: 10px;
	height: 20px;
	border-top: #f0f0f0 1px solid;
	background: #cccccc;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	text-transform: uppercase;
	color: #000;
	font-size: 1em;
}
.accordion span {
	background: #000;
	color: #fff;
}
.show span {
	display: block;
	float: right;
	padding: 10px;
}
.accordion span {
	display: block;
	float: right;
	background: url(http://www.snyderplace.com/demos/images/plus.png) center center no-repeat;
	padding: 10px;
}
.show span {
	background: url(http://www.snyderplace.com/demos/images/minus.png) center center no-repeat;
}
div.container {
	padding: 0;
	margin: 0;
	display: none;
}
div.content {
	background: #f0f0f0;
	margin: 0;
	padding: 10px;
	font-size: .9em;
	line-height: 1.5em;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
div.content ul, div.content p {
	margin: 0;
	padding: 3px;
}
div.content ul li {
	list-style-position: inside;
	line-height: 25px;
}
div.content ul li a {
	color: #555555;
}
div.show + .container {
	display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p></div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion show">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>
<div class="accordion">Heading<span></span></div>
<div class="container">
	<div class="content">
		<div>Sample Content</div>
		<p>Content here....</p>
	</div>
</div>

＆＃13;

摘要： （不是真的）

变量首先被初始化。的价值观在此过程中，每个需求都会设置变量。
第一个 each 块是根据 scrollTop offset.top() 值>手风琴元素的所有的位置。然后将其存储在每个 data() 元素的 accordion 属性中。
首先收集当前已应用 show 类的元素并将其存储在名为 openedAccordions 的变量中。
然后它会暂时从中删除 show 类。
使用jQuery提供的方便的 data() 方法获取每个元素的 offset.top() 位置并存储在元素中。
我们不是简单地使用 show 方法重新应用 addClass() 类，而是动画使用 slideDown() 方法，仅在完成动画后，我们使用 {{1}应用 show } 即可。
这很重要，因为在没有动画的情况下使用 addClass() 直接应用 show 会产生不需要的 小故障< / em> 您作为用户第一次与整个组件进行交互。 小故障 基本上是您第一个已经可见的 addClass() 元素，它可以在没有动画的情况下立即消失。

上述方法的原因是因为当事物是动画时，浏览器将返回任何给定手风琴元素的当前 container 位置，这可能不完全是我们要求的，即动画可能是正在进行中，来自 offset().top 的计算结果可能不正确，因此浏览器将滚动到不需要的位置。我希望你能理解我在这里要说的话。

继续......

点击任何 offset().top 元素后，会定义一些内部变量并设置其值。

典型的 accordion 子句，检查该元素是否已应用名为 if 的类。

这是您采用的方法与我采用的方法的根本区别。我没有选择 show 状态，而是选择了简单地查找课程＆＃39;存在于元素上。

:visible 子句的其余部分应该是不言自明的。

最后一点是另一个有趣的地方。

发生的事情是我使用 if 为元素设置动画，以便 slideUp 元素隐藏除了刚刚点击的那个。我希望我在这里有意义。

这就是它。如果您有任何问题，请与我联系。

希望这有帮助。

P.S。我想对我来说很酷的是如何在快速点击时重新调整。尝试增加 openedAccordions 和 scrollDuration 值，以使所有动画变慢并点击随机 slideDuration 通过重新调整来了解我的意思。

Answer 3

刚刚完成你的幻灯片移除完成后的show class，并在最后使用slideDown函数显示你的容器。

$(document).ready(function() {
    $('.accordion').click(function(){
        if($(this).next('.container').is(':visible')) {
            var self = $(this);
            $(this).next('.container').slideUp(800,function() {
                self.removeClass('show');
            });
        }
        else {
            $('.accordion').find('.container:visible').slideUp();
            $('.accordion').removeClass('show');
            $(this).addClass('show');
            $(this).next('.container').slideDown();
            $('html, body').animate({
                scrollTop: $(this).offset().top
            }, 200);
            $(this).slideDown();
        }         
    });
});

此处正在运行：https://jsfiddle.net/07fdq3t1/6/

Jquery Accordion - 用动画打开内容

3 个答案: