如何组织两个div之间的交互？

Question

我在页面上有两个div。其中一个是隐藏的，另一个是可见的。它们都在同一个地方，形成层次。第一个是背景（我们看不到），第二个是叠加（我们可以看到）。

我希望按钮能够切换div的可见性。当我按下按钮时，它必须改变div的可见性（拳头对背景，第二个进入叠加）。

如何使用jQuery？

UPD

这是我的尝试http://jsfiddle.net/0qth6jdn

问题是我不知道如何使用div制作图层。

Answer 1

如果您只是需要更改可见性，Jquery的.toggle()可能是最简单的方法。

Jquery Toggle Docs

如果你将div的两个类都设置为相同，那就更容易了。只需在按钮的点击事件中致电toggle：

$(".myClass").toggle();

这是一个简单的例子：
JsFiddle Example

修改

这是你自己的小提琴更新。我将您的风格改为visibility: hidden，而不是display: none;，因为它允许您使用Jquery的.toggle()而无需检查任何条件：

Your JsFiddle Updated!!

Answer 2

单击按钮时执行此操作（您必须将IdOfDiv1和IdOfDiv2更改为实际的div ID）：

$("#IdOfDiv1").toggle();
$("#IdOfDiv2").toggle();

Answer 3

你可以这样做：

1. 您创建一个<input type="checkbox">超过您想要的<div>。
2. 你给它一个很好的id喜欢'div-toggler`。
3. 你设置这个css：
   

#div-toggler ~ #your-hidden-div {display:none;}
#div-toggler:checked ~ #your-hidden-div {display:block;}

1. 您在另一个<label for="div-toggler">
中创建了新的<div>
2. 按照您希望的方式设计样式，看起来像一个按钮。
3. 如果您关心旧版浏览器，但不支持{c}上的:checked，请使用[checked]。
   如果不起作用，则创建<label onclick="var e=document.getElementById(this.getAttribute('for'));e.setAttribute('checked',e.checked);" for="div-toggler">在css改变之后。

的更新：

看到新的更新后，很清楚：

if ($('#first').visibility == 'hidden' && $('#second').visibility == 'visible'){

应该是

if ($('#first').css('visibility') == 'hidden' && $('#second').css('visibility') == 'visible'){

更新2：

实际上，这是正确的代码：

window.replaceDiv=function() {
    if ($('#first').css('visibility') == 'hidden' && $('#second').css('visibility') == 'visible'){
        $('#first').css('visibility','visible');
        $('#second').css('visibility','hidden');
    }
}

这是：http://jsfiddle.net/gughtms7/

Answer 4

有一百万种方法可以做到这一点。如果两个divs都有ID，您可以简单地切换它们，如下所示：

$('#id-of-your-button').on('click', function(){
  $('#id-first-div').toggle();
  $('#id-second-div').toggle();
});

另一种方法是在父元素上切换一个类：

$('#id-of-your-button').on('click', function(){
  $('#parent').toggleClass('switch');
});

然后通过css

应用所有更改

#parent #id-second-div {
  display: none;
}
#parent.switch #id-first-div {
  display: none;
}
#parent.switch #id-second-div {
  display: block;
}

这一切都取决于你的情况