Question

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

＆＃13;

bc.bars[(0, 1)].fillColor = colors.blue
bc.bars[(0, 2)].fillColor = colors.red

＆＃13;

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

＆＃13;

Answer 1

添加display none以从开头隐藏元素：

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

fiddle to check

我希望这是有帮助的答案。祝你好运！

当jquery显示另一个div时，我如何隐藏div？

5 个答案: