Question

好的，所以我在每个div中都有相同的按钮。单击它时，我希望Div4出现在用户按下按钮的div下面。例如，如果用户在Div2内按下Button，则Div4将出现在Div2和Div3之间。它会推动Div3向下而不是出现/隐藏Div3。

如何通过jQuery实现这一目标？

谢谢。

$('#Button').click(function() {
  $('#Div4').fadeIn(200);
});

body {
  color: white;
  text-align: center;
}
#Button {
  width: 40px;
  height: 20px;
  background: brown;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
}
#Div1 {
  width: 100px;
  height: 50px;
  background: blue;
}
#Div2 {
  width: 100px;
  height: 50px;
  background: green;
}
#Div3 {
  width: 100px;
  height: 50px;
  background: purple;
}
#Div4 {
  width: 100px;
  height: 50px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <div id="Div1">
    Div1
    <div id="Button">Click</div>
  </div>
  <div id="Div2">
    Div2
    <div id="Button">Click</div>
  </div>
  <div id="Div3">
    Div3
    <div id="Button">Click</div>
  </div>
</body>

Answer 1

这是一个可能的解决方案：http://jsfiddle.net/2nxd6fon/7/

而不是div的相同ID（这不是正确的方法），使用如下所示的类，

[由于我没有在您的HTML中看到Div4，我采取了以下方法。]

<body>

    <div id="Div1">
        Div1
        <div class="button">Click</div>
    </div>
    <div id="Div2">
        Div2
        <div class="button">Click</div>
    </div>
    <div id="Div3">
        Div3
        <div class="button">Click</div>
    </div>
</body>

var div4Content =  '<div id="Div4">'+
    'Div4'+
    '<div class="button">Click</div>'+
  '</div>';

$('.button').click(function() { 
    $(this).parent().after(div4Content);
});

Answer 2

首先，ID必须是唯一的，您不能重复id="Button"。你应该使用一个类。

您可以使用.after()在当前DIV之后移动#Div4，然后将其淡入。

$('.Button').click(function() {
  $(this).parent().after($('#Div4').fadeIn(200));
});

body {
  color: white;
  text-align: center;
}
.Button {
  width: 40px;
  height: 20px;
  background: brown;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
}
#Div1 {
  width: 100px;
  height: 50px;
  background: blue;
}
#Div2 {
  width: 100px;
  height: 50px;
  background: green;
}
#Div3 {
  width: 100px;
  height: 50px;
  background: purple;
}
#Div4 {
  width: 100px;
  height: 50px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <div id="Div1">
    Div1
    <div class="Button">Click</div>
  </div>
  <div id="Div2">
    Div2
    <div class="Button">Click</div>
  </div>
  <div id="Div3">
    Div3
    <div class="Button">Click</div>
  </div>
  <div id="Div4">
    Div4
  </div>
</body>

如何在点击按钮时使div在最近的div下淡入？

2 个答案: