如何使用jquery使用.click函数显示隐藏元素

Question

我想点击一个img（向下箭头）来显示一个容器，然后点击一个div（一个“X”）来隐藏同一个容器。 我遇到的问题是维护容器的css属性。

如果我保持显示：内联块设置，则在单击img之前显示整个容器，但是如果我更改为display：none并且不包含$（“。create”）。css（{“display”：“ inline-block“}）在我的jquery代码中，整个容器浮动到左边。

我通过使用jquery来点击它来改变容器的css，但是我想知道是否有一种更简单的方法。

以前我已经将容器设置为display：none然后使用jquery，将其更改为显示：inline-block，以便父div的text-align：center指令使原始容器出现在页面的中间。

我希望隐藏创建容器，直到我单击图像元素，然后在我单击退出div后再次隐藏。

我不知道这些代码是否写得不好，我怀疑是这样！

 $(function() { $(".arrow-1").click(function() { $(".create").show(500); $(".create").css({ "display": "inline-block" }) }); }); $(function() { $(".exit").click(function() { $(".create").hide(500); }); }); 

 .create-container { text-align: center; } .create { height: 400px; width: 300px; margin: 10px 0 10px 0; background-color: lightgrey; border-radius: 5px; position: relative; display: none; } .exit { color: white; float: right; margin: 10px; height: 25px; font-size: 20px; width: 25px; border: white 3px solid; border-radius: 50% 50% 50% 50%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="arrows"> <div class="arrow-imgs"> <a href="#"><img class="arrow-1" src="https://monasteryeventcenter.com/wp-content/uploads/revslider/home/white-down-arrow-png-2.png"></a> </div> </div> <div class="create-container"> <div class="create"> <div class="exit"><a href="#">X</a></div> </div> </div> 

Answer 1

编辑：

要使用jQuery简单地显示或隐藏元素，您可以使用

$(".create-container").attr("hidden", true)

编辑前：

纠正我，如果我错了，但似乎你试图在点击时显示某种工具提示。

<style>
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

取自w3schools： https ： //www.w3schools.com/css/css_tooltip.asp

您还可以在该容器中添加一个隐藏它的小“x”

$("#xbutton").on("click", () => $("#container).attr("hidden", true));

我希望这是你的目标，如果没有道歉。