Question

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

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

我已经通过使用jquery在单击时更改了容器的CSS来进行绑定，但是我想知道是否有更简单的方法来做到这一点。

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

我希望在单击图像元素之前隐藏创建容器，然后在单击退出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));

我希望这是您的目标，否则请向我们道歉。

如何使用jQuery使用.click功能显示隐藏元素

1 个答案: