javascript - 单击时显示。点击时不会隐藏

Question

我有一个由

组成的关闭按钮

  <p><span class="glyphicon glyphicon-remove" aria-label="Close"></span></p>

   <div id="tag1" class="tag">
        <p class="p1">Dog Info</p>
        <video id="VideoA1" class="VideoA"><source src=""></video>
        <p><span class="glyphicon glyphicon-remove" aria-label="Close"></span></p>
      </div>

这个的CSS是......所以它在开始时被隐藏。

 p .glyphicon-remove{
   color: white;
   font-size: 20px;
   position: absolute;
   top: 5px;
   right: 7%;
   display: none;
 }

 p .glyphicon-remove:hover{
   color: yellow;
   cursor: pointer;
   font-size: 25px;
  }

如您所见，它是隐藏的。然后在 jquery 中，我基本上使包含此按钮的 div 在单击时展开。效果很好。单击 div 时，我还会获得 clode 按钮“span”以显示()。这也很好用。但是，我无法让相同的关闭按钮在单击时消失。

$(".row1 .tag").click(function(){
   $(this).siblings().hide();
   $(this).animate({
     width:"90%",
});
 $(".VideoA", this).css('display', 'none');
 $("p .glyphicon-remove", this).show();
});

$("p .glyphicon-remove").click(function(){
   $(this).hide();
});

============================

可能的解决方案:

看来我可以通过选择它的类然后告诉 jquery 隐藏它的父级(跨度？)来选择关闭按钮

$(".glyphicon-remove").click(function(){
  $(this).parent().hide();
});

Answer 1

您应该使用 e.stopPropagation() 防止事件在 DOM 树中冒泡，从而防止任何父处理程序收到该事件的通知，在您的情况下，单击 .tag当您点击 close 时 div 被触发按钮，因此这里需要 stopPropagation 来防止这种情况:

$("p .glyphicon-remove").click(function(e){
    e.stopPropagation();
    $(this).hide();
});

希望这有帮助。