jQuery显示另一个div时如何隐藏div？

Question

我希望当单击激活element2 div时，该元素应该消失。 而且element2 div不应出现在开头。

 $(".toggle").click(function() { $(".element2").toggle(); }); $(".close").click(function() { $(".element2").hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="element"> Element 1 <div class="toggle"> toggle </div> <div class="element2"> Element 2 <div class="close">close Element 2</div> </div> </div> 

Answer 1

添加无显示以从头开始隐藏元素：

<div class="element2" style="display:none">

除非我误解了“我希望在单击激活element2 div时单击该元素，该元素应该消失”，否则其余的代码似乎都在按预期的方式进行……这完全有可能。

Answer 2

只是$(".element2").hide(); 一开始就隐藏起来

 $(function() { $(".element2").hide(); $(".toggle").click(function() { $(".element2").toggle(); }); $(".close").click(function() { $(".element2").hide(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="element">Element 1 <div class="toggle">Toggle </div> <div class="element2"> Element 2 <div class="close"> close</div> </div> </div> 

Answer 3

为了一开始就隐藏element2，您需要添加一个样式标签，或者甚至更好地添加一个CSS文件，以便将所有样式都放在一个位置。

对于样式标签：

<div class="element2" style="display:none">

对于CSS：

.element2 {
    display: none;
}

然后对于您的代码，您就很接近了。 为了隐藏元素，您需要将其更改为：

$(".toggle").click(function() {
    $(".element2").show();
    $(".element").hide();
});

$(".close").click(function() {
    $(".element2").hide();
    $(".element").show();
});

HTML将需要进行一些更改，这将使我编写的内容按我认为您希望的方式工作：

<div class="element">
  Element 1
  <div class="toggle">
    toggle
  </div>
</div>
<div class="element2">
  Element 2 
  <div class="close">close Element 2</div>
</div>

Answer 4

您可能应该执行以下操作：

$(".toggle").click(function() {
  $(this).parent().find(".element2").toggle();
});

$(".close").click(function() {
  $(this).parent().hide(); // close the correct .element2
});

在CSS中，您需要：

.element2 {
   display: none;
}

Answer 5

的HTML

   <div class="element">
      <div class="toggle"></div>
      <div class="element2" style="display:none">
        <div class="close"></div>
      </div>
    </div>

CSS示例

.toggle
{
  display:block;
  width:20px;
  height:20px;
  margin-left:10px;
  float:left;
  background:green;
}

.element2{
  display:block;
  width:40px;
  height:40px;
  margin-left:10px;
  float:left;
  background:yellow;
}
.close{
  display:block;
  width:20px;
  height:20px;
  margin-left:10px;
  float:right;
  border:1px solid #000;
}

JQUERY

$(".toggle").click(function() {
  $(".element2").toggle();
});


$(".close").click(function() {
  $(".element2").css({"display":"none"});
});

摆弄检查

希望对您有帮助。 祝好运 ！