[英]Using jQuery slideToggle() without display:none?
I'm trying to use jQuery's slideToggle function to show or hide a panel which has been hidden using CSS position, rather than display:none (as this causes issues with a Google Map in one of my panels). 我正在尝试使用jQuery的slideToggle函数来显示或隐藏使用CSS位置隐藏的面板,而不是display:none(因为这会导致我的某个面板中的Google Map出现问题)。
At the moment I'm just hiding and showing the panels like so, but some animation would be nice: 目前我只是隐藏并显示这样的面板,但有些动画会很好:
$('.panel').addClass('hidden');
$('.head > span').addClass('closed');
$('.head').click(function() {
$(this).next('.panel').toggleClass('hidden');
$(this).children('span').toggleClass('open');
});
Any ideas? 有任何想法吗?
slideToggle animates height of the element in question apart from visibility. slideToggle动画显示有问题元素的高度,而不是可见性。 Not sure how exactly you have used CSS position to show/hide your panels.
不确定您是如何使用CSS位置来显示/隐藏面板的。 Based on that you have to build you own animation using animate function.
基于此,您必须使用animate函数构建自己的动画。 Another quick way could be to
另一种快捷方式可能是
For showing element: 用于显示元素:
Hide the element (using jquery hide()) 隐藏元素(使用jquery hide())
Apply your class to show element (ie to adjust its position) 应用您的类来显示元素(即调整其位置)
Now apply slideDown 现在应用slideDown
For hiding content: 隐藏内容:
Apply slideUp - use callback function to do steps 2 & 3 应用slideUp - 使用回调函数执行步骤2和3
Apply your class to hide element (ie to adjust its position outside window) 应用你的类来隐藏元素(即调整它在窗口外的位置)
Show the element (using jquery show()) 显示元素(使用jquery show())
Edit : Illustrative code goes below (assuming that 'hidden' classes will do CSS positioning to hide the element): 编辑 :说明性代码如下(假设“隐藏”类将执行CSS定位以隐藏元素):
function customSlideToggle(e)
{
var show = e.hasClass('hidden');
if (show) {
e.hide();
e.removeClass('hidden')
e.slideDown('slow');
}
else
{
e.slideUp('slow', function() {
e.addclass('hidden');
e.show();
});
}
}
slideToggle()
is an alternative to toggle()
, which shows/hides the selected items depending on its current visible state. slideToggle()
是toggle()
的替代方法,它根据当前的可见状态显示/隐藏所选项目。
You needn't worry about the classes at all if you are simply trying to get the animation to work. 如果你只是想让动画工作,你根本不用担心这些类。
So, just try the following to see what you get: 所以,只需尝试以下操作即可了解您的结果:
$(this).next('.panel').slideToggle();
Try this Pezholio 试试这个 Pezholio
$('.head').click(function() {
$(this).next('.panel').slideToggle('slow', function() {
$(this).toggleClass('hidden')
});
$(this).children('span').slideToggle('slow', function() {
$(this).toggleClass('open')
});
});
you can combine few more effect slideUP,slideDown,slideToggle and with easing plugin you have even add some smoothness to animation 你可以结合更多的效果slideUP,slideDown,slideToggle和easing插件你甚至可以为动画添加一些平滑度
Here is an example 这是一个例子
Html HTML
<p class="text">
test one<br />
test one<br />
test one<br />
test one<br />
test one<br />
</p>
<span class="more">show</span>
javascript JavaScript的
$(document).ready(function() {
$('span.more').click(function() {
$('p:eq(0)').slideToggle();
$(this).hide();
});
});
CSS CSS
.text{display:none}
live demo 现场演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.