切换/切换 div (jQuery)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/752847/
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
Switch/toggle div (jQuery)
提问by CMS
I wish to accomplish a fairly simple task (I hope!)
我希望完成一个相当简单的任务（我希望！）
I got two div tags and one anchor tags, like this:
我有两个 div 标签和一个锚标签，如下所示：
<a href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display:none;"></div>
I wish use the anchor tag to toggle between the two div tags, hide the one and show the other and vice versa.
我希望使用锚标签在两个 div 标签之间切换，隐藏一个并显示另一个，反之亦然。
How can this be done the best way?
如何以最好的方式做到这一点？
回答by CMS
Since one div is initially hidden, you can simply call togglefor both divs:
由于一个 div 最初是隐藏的，您可以简单地为两个 div调用toggle：
<a href="javascript:void(0);" id="forgot-password">forgot password?</a>
<div id="login-form">login form</div>
<div id="recover-password" style="display:none;">recover password</div>
<script type="text/javascript">
$(function(){
$('#forgot-password').click(function(){
$('#login-form').toggle();
$('#recover-password').toggle();
});
});
</script>
回答by Norbert B.
I think you want this:
我想你想要这个：
$('#recover-password').show();
or
或者
$('#recover-password').toggle();
This is made possible by jQuery.
这是由 jQuery 实现的。
回答by Brandon Montgomery
Use this:
用这个：
<script type="text/javascript" language="javascript">
$("#toggle").click(function() { $("#login-form, #recover-password").toggle(); });
</script>
Your HTML should look like:
您的 HTML 应如下所示：
<a id="toggle" href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display:none;"></div>
Hey, all right! One line! I <3 jQuery.
嘿，好吧！一条线！我 <3 jQuery。
回答by wdspot
I think this works:
我认为这有效：
$(document).ready(function(){
// Hide (collapse) the toggle containers on load
$(".toggle_container").hide();
// Switch the "Open" and "Close" state per click then
// slide up/down (depending on open/close state)
$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false; // Prevent the browser jump to the link anchor
});
});
回答by yogi46
Try this: http://www.webtrickss.com/javascript/jquery-slidetoggle-signup-form-and-login-form/
试试这个：http: //www.webtrickss.com/javascript/jquery-slidetoggle-signup-form-and-login-form/
????????????????????????????????????????????????
???????????????????????????????????????????????????
回答by Alex K
I used this way to do that for multiple blocks without conjuring new JavaScript code:
我使用这种方式对多个块执行此操作，而无需调用新的 JavaScript 代码：
<a href="#" data-toggle="thatblock">Show/Hide Content</a>
<div id="thatblock" style="display: none">
Here is some description that will appear when we click on the button
</div>
Then a JavaScript portion for all such cases:
然后是所有此类情况的 JavaScript 部分：
$(function() {
$('*[data-toggle]').click(function() {
$('#'+$(this).attr('data-toggle')).toggle();
return false;
});
});
回答by mokrane
This is how I toggle two divs at the same time:
这就是我同时切换两个divs 的方式：
$('#login-form, #recover-password').toggle();
It works!
有用！
回答by Himani Bhardwaj
function toggling_fields_contact_bank(class_name) {
jQuery("." + class_name).animate({
height: 'toggle'
});
}
回答by pmarflee
You could write a simple jQuery plugin to do this. The plugin would look like:
您可以编写一个简单的 jQuery 插件来执行此操作。该插件看起来像：
(function($) {
$.fn.expandcollapse = function() {
return this.each(function() {
obj = $(this);
switch (obj.css("display")) {
case "block":
displayValue = "none";
break;
case "none":
default:
displayValue = "block";
}
obj.css("display", displayValue);
});
};
} (jQuery));
Then wire the plugin up to the click event for the anchor tag:
然后将插件连接到锚点标签的点击事件：
$(document).ready(function() {
$("#mylink").click(function() {
$("div").expandcollapse();
});
});
Providing that you set the initial 'display' attributes for each div to be 'block' and 'none' respectively, they should switch to being shown/hidden when the link is clicked.
如果您将每个 div 的初始 'display' 属性分别设置为 'block' 和 'none'，当点击链接时，它们应该切换为显示/隐藏。
