切换/切换 div (jQuery)答案

【问题标题】：Switch/toggle div (jQuery)切换/切换 div (jQuery)
【发布时间】：2010-10-19 15:58:48
【问题描述】：

我希望完成一个相当简单的任务（我希望！）

我有两个 div 标签和一个锚标签，像这样：

<a href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display:none;"></div>

我希望使用锚标签在两个 div 标签之间切换，隐藏一个并显示另一个，反之亦然。

怎样才能做到最好？

【问题讨论】：

标签： jquery html switch-statement toggle

【解决方案1】：

您可以编写一个简单的 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));

然后将插件连接到锚标签的点击事件：

$(document).ready(function() {
    $("#mylink").click(function() {
        $("div").expandcollapse();
    });
});

如果您将每个 div 的初始 'display' 属性分别设置为 'block' 和 'none'，则它们应该在单击链接时切换为显示/隐藏。

【讨论】：

谢谢！这正是我要找的！
@pmarflee：您已经有效地重新实现了内置的 toggle() 函数... ;-)
Shog9 - 我不知道它存在。我想我需要复习一下我的 jQuery 技能...

【解决方案2】：

由于最初隐藏了一个 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>

【讨论】：

【解决方案3】：

我想你想要这个：

$('#recover-password').show();

或

$('#recover-password').toggle();

这可以通过 jQuery 实现。

【讨论】：

【解决方案4】：

使用这个：

<script type="text/javascript" language="javascript">
    $("#toggle").click(function() { $("#login-form, #recover-password").toggle(); });
</script>

您的 HTML 应如下所示：

<a id="toggle" href="javascript:void(0);">forgot password?</a>
<div id="login-form"></div>
<div id="recover-password" style="display:none;"></div>

嘿，好吧！一条线！我

【讨论】：

【解决方案5】：

我认为这可行：

$(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
    });
});

【讨论】：

【解决方案6】：

试试这个：http://www.webtrickss.com/javascript/jquery-slidetoggle-signup-form-and-login-form/

َََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََََ

【讨论】：

链接似乎已损坏：“嗯。我们无法找到该站点。我们无法连接到 www.webtrickss.com 上的服务器。”

【解决方案7】：

我使用这种方式对多个块执行此操作，而无需使用新的 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>

然后是所有此类情况的 JavaScript 部分：

$(function() {
  $('*[data-toggle]').click(function() {
    $('#'+$(this).attr('data-toggle')).toggle();
    return false;
  });
});

【讨论】：

【解决方案8】：

这就是我同时切换两个divs 的方式：

$('#login-form, #recover-password').toggle();

有效！

【讨论】：

【解决方案9】：

function toggling_fields_contact_bank(class_name) {
    jQuery("." + class_name).animate({
        height: 'toggle'
    });
}

【讨论】：

请在您的回答中添加一个简短的解释。