javascript - 如何使用 jquery 显示带有 .click 函数的隐藏元素

Question

我想单击 img(向下箭头)以显示容器，然后单击 div(“X”)以隐藏同一容器。我遇到的问题是维护容器的 css 属性。

如果我保留 display: inline-block 设置，则在我单击 img 之前会显示整个容器，但是如果我更改为 display: none 并且不包含 $(".create").css({"display ":"inline-block"}) 在我的 jquery 代码中，整个容器显示为向左浮动。

我已经通过使用 jquery 在单击时更改容器的 css 来解决它，但我想知道是否有更简单的方法来执行此操作。

之前我已经将容器设置为display: none 然后使用jquery，将其更改为display: 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("隐藏", 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("点击", () => $("#container").attr("hidden", true));

我希望这是您的目标，如果不是，我们深表歉意。