javascript 在没有显示的情况下使用 jQuery slideToggle():none？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3751204/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery slideToggle() without display:none?
提问by Pezholio
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 地图出现问题）。
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?
有任何想法吗？
回答by VinayC
slideToggle animates height of the element in question apart from visibility. Not sure how exactly you have used CSS position to show/hide your panels. Based on that you have to build you own animation using animatefunction. Another quick way could be to
除了可见性之外，slideToggle 还为相关元素的高度设置动画。不确定您是如何使用 CSS 位置来显示/隐藏面板的。基于此，您必须使用animate功能构建自己的动画。另一种快速的方法可能是
For showing element:
用于显示元素：
Hide the element (using jquery hide())
Apply your class to show element (i.e. to adjust its position)
Now apply slideDown
隐藏元素（使用 jquery hide()）
应用您的类来显示元素（即调整其位置）
现在应用slideDown
For hiding content:
隐藏内容：
Apply slideUp - use callback function to do steps 2 & 3
Apply your class to hide element (i.e. to adjust its position outside window)
Show the element (using jquery show())
应用 slideUp - 使用回调函数执行第 2 步和第 3 步
应用您的类来隐藏元素（即调整其在窗口外的位置）
显示元素（使用 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();
});
}
}
回答by James Wiseman
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();
回答by Pramendra Gupta
Try thisPezholio
试试这个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,slideToggleand with easing plugin you have even add some smoothness to animation
您可以结合更多效果slideUP、slideDown、slideToggle 和缓动插件，您甚至可以为动画添加一些平滑度
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
? 现场演示
