我有一个带标签的 accordion 菜单。当你点击标签时，信息就会显示在其中一个标签的下面，通过平滑的上下滑动。
问题是在slideUp和slideDown期间，动画中有一个卡顿。我也试过animate和调整一些css，但我不能弄清楚。
如果有帮助，这里是fiddle。
HTML：
<div class="project-container">
These don't slide well:
<ul class="project-nav">
<li class="project-tab" id="project-tab-1"><a id="project-tab-link" href="#" class="active">Tab 1</a>
<section class="is-open">
<p id="current-project-title">TITLE</p>
<p>TEXT HERE</p>
</section>
</li>
<li class="project-tab" id="project-tab-2"><a id="project-tab-link" href="#">Tab 2</a>
<section>
INFO HERE<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
</li>
</ul>
</div>
<br>
But this slides VERY well:
<br>
<button class="toggle-info">toggle slider<i class="glyphicon glyphicon-chevron-down"></i></button>
<section class="info-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </section>Javascript：
$(document).ready(function() {
var Tabs = {
el: {
nav: $(".project-nav"),
tabs: $(".project-nav > .project-tab > a"),
panels: $(".project-nav > .project-tab > section"),
},
init: function() {
Tabs.bindUIActions();
},
bindUIActions: function() {
Tabs.el.nav
.on(
'click',
'.project-tab > a:not(.active)',
function(event) {
Tabs.deactivateAll();
Tabs.activateTab(event);
event.preventDefault();
}
);
},
deactivateAll: function() {
Tabs.el.tabs.removeClass("active");
Tabs.el.panels.removeClass("is-open").slideUp('slow');
},
activateTab: function(event) {
$(event.target)
.addClass("active")
.next()
.addClass("is-open").slideDown('slow');
}
};
Tabs.init();
////// Slide Doesn't Work For Tabs
$('.project-tab section.is-open').slideDown('slow');
////// Slide Works For Toggle Button
$('.toggle-info').click(function() {
$('.info-container').slideToggle('slow');
$("i", this).toggleClass("glyphicon glyphicon-chevron-right glyphicon glyphicon-chevron-down");
});
});
2条答案
按热度按时间x9ybnkn61#
这就是你的问题
你在幻灯片元素中添加了过渡css，它会使幻灯片效果不能正常工作，你必须删除它
你可以试试这个jsfiddle
gt0wga4j2#
我使用CSS而不是jquery来达到预期的效果，我使用
max-height过渡来使标签平滑地上下滑动。以下是更新后的fiddle.
这是新的CSS：