切换div（jQuery）的开关

Question

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

我有两个

标签和一个标签，就像这样：

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

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

最好的方法是什么？

- Jan

Answer 1

由于一个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>

- Christian C. Salvadó

Answer 2

我认为您需要这个：

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

或者

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

这得益于jQuery的支持。

- Norbert B.

Answer 3

这是我同时切换两个 div 的方法：

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

它起作用了！

- mokrane

Answer 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>

嘿，太好了！一行代码！我 <3 jQuery。

- Brandon Montgomery

Answer 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
    });
});

- wdspot

Answer 6

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

---

@pmarflee：你已经成功地重新实现了内置的toggle()函数...;-) - Shog9

Shog9 - 我不知道那个存在。看来我需要提高一下我的jQuery技能... - pmarflee

Answer 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;
  });
});

- Alex K

Answer 8

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

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

- yogi46

---

链接似乎已经损坏了："嗯，我们在找到那个网站方面遇到了问题。我们无法连接到 www.webtrickss.com 的服务器。" - Peter Mortensen

Answer 9

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

- Himani Bhardwaj

---

请在您的答案中添加一个简短的解释。 - Maciej Jureczko