Question

我正在使用jquery来切换多个目标。我创建了一段代码，一旦它打开就关闭div。然后按x关闭open div。当我重新打开相同的切换时，x就不再存在了。

HTML

<a class="showSingle" target="1">show 1</a>
<a class="showSingle" target="2">show 2</a>

<div id="div1" class="targetDiv bio">Lorum Ipsum1 <div class="close">x</div></div>
<div id="div2" class="targetDiv bio">Lorum Ipsum2</div>

CSS

.targetDiv {
    display: none
}
.bio {
  background: #f6f6f6;
  margin-top: 15px;
  padding: 20px;
  display: none;
  border: 1px solid grey;
  position: relative;
}
.close {
  position: absolute;
    top: 15px;
  right: 15px;
}

正在使用的jquery

jQuery(function () {
    jQuery('.showSingle').click(function () {
        var index = $(this).index(),
            newTarget = jQuery('.targetDiv').eq(index).slideDown();
        jQuery('.targetDiv').not(newTarget).slideUp();
    });
  $(".close").click(function(){
      $(".targetDiv").hide("fast");
      $(this).toggle("fast");
  });
});

如何通过点击生物类来切换关闭或用x切换关闭并让它重新出现。

http://jsfiddle.net/eLy4b00n/

Answer 1

我对JS几乎一无所知，但摆弄它我得到了它的工作：

jQuery(function () {
    jQuery('.showSingle').click(function () {
        var index = $(this).index(),
            newTarget = jQuery('.targetDiv').eq(index).slideDown();
        $(".close").show("fast");
        jQuery('.targetDiv').not(newTarget).slideUp();
    });
  $(".close").click(function(){
      $(".targetDiv").hide("fast");
      $(this).toggle("fast");
  });
});

添加了以下行：

$(".close").show("fast");

小提琴：http://jsfiddle.net/36b99b8t/

Answer 2

删除声明：

  $(this).toggle("fast");

隐藏切换以使其不再可见。由于您隐藏了其父容器，因此不需要这样做。如果你删除它，当你显示父容器时，它应该仍然存在。

Jquery切换关闭并消失

2 个答案: