Question

我有这些称为小标签的div，然后当你点击它们时它们会展开，并显示里面隐藏的元素。 X（＆lt; p＆gt;＆lt; span＆gt; X＆lt; / span＆gt;＆lt; / p＆gt; ）也会显示出来。单击此X时，此标记（div）应关闭。

在Firefox中，标签打开正常。然后关闭它关闭并重新打开。我无法弄清楚为什么关闭后会打开。

顺便说一句，我根本无法让前三行完成。

请注意，它在Chrome上运行良好。所以Firefox正在以不同的方式解释Jquery

HTML

    <div class="row row1">
      <div id="tag1" class="tag">
        <p class="p1">Header</p>
        <video id="VideoA1" class="VideoA" name="media">
          <source src="">
          <source src="" type="video/mp4">
          <source src="" type="video/mv4">
        </video>
        <p id="X"><span id="X" class="glyphicon glyphicon-remove" aria-label="Close"></span></p>
        <iframe id="player1" class="ytplayer" width="390" height="220" src="" frameborder="0" allowfullscreen></iframe>
        <p class="text">Random Text</p>
      </div>
   </div>

JQUERY

//This will make the tags expand to take up the whole row when clicked
   $(".row .tag").on('click', function(event1){

 if(event1.target.id == "tag1") {
   alert("hello");
   return; //Do nothing if the X is closed
 }
else {

$(this).siblings().hide();
$(this).animate({
  width:"98%",
});
$(".VideoA", this).css('display', 'none');
$("img", this).addClass('offleft');
$(".tag").hover(function(){
  $(this).css("cursor","default")
});
$(".glyphicon-remove", this).delay(1000).show();
$(".glyphicon-remove", this).parent().show();
$('iframe',this).show();
$('.text',this).show();
}
});


$(".row1 .glyphicon-remove").click(function(){

 var clicked = this;
 $(this).parent().hide();
 $(".row1 iframe").hide();
 $(".row1 .text").hide();
 $(this).parent().parent().animate({
   width: "400px",
 },function(){
  $(".row1 .VideoA").show();
  $("img", this).removeClass('offleft');
  $(".tag",this).css('cursor','pointer');
  $(clicked).parent().parent().siblings().show();
});
event.stopPropagation();
});


$(".row2 .glyphicon-remove").click(function(){
var clicked = this;
$(this).parent().hide();
$(".row2 iframe").hide();
$(".row2 .text").hide();
$(this).parent().parent().animate({
  width: "400px",
},function(){
  $(".row2 .VideoA").show();
  $("img", this).removeClass('offleft');
  $(".tag",this).css('cursor','pointer');
  $(clicked).parent().parent().siblings().show();
  });
  event.stopPropagation();
});

Answer 1

<string>未定义。

将event注入event。否则$(".row2 .glyphicon-remove").click(function(event){没用。

我认为，Chrome是严格的，并且在stopPropagation它会停止对当前函数的评估，即它在遇到undefined值时会抛出错误并停止针对该特定闭包的JS评估。

然而，似乎firefox继续评估并将undefined冒出DOM树。因此，在您的情况下，您的功能需要click点击，因此需要通过调用event并将stopPropagation注入您的event.stopPropagation()手动event关闭，或者您也可以在函数末尾return false，因为它是一个jquery event object，与调用event.preventDefault()和event.stopPropagation()相同。

e.g。

    $(".row2 .glyphicon-remove").click(function(event){
    //stop propagation for the event but continue to evaluate current function
    event.stopPropagation(); 
      var clicked = this;
      $(this).parent().hide();
      $(".row2 iframe").hide();
      $(".row2 .text").hide();
      $(this).parent().parent().animate({
        width: "400px",
      },function(){
        $(".row2 .VideoA").show();
        $("img", this).removeClass('offleft');
        $(".tag",this).css('cursor','pointer');
        $(clicked).parent().parent().siblings().show();
      });
    return false; //jquery event stop propagation + prevent default    
    });

Jquery动画在关闭时发生两次

1 个答案: