Question

我有一个问题，当我点击按钮时，我的取消按钮嵌套在触发器中的div的.click。这会导致slideUp和slideDown同时触发，这会导致div保持可见。我尝试添加状态以防止div再次滑落，但这没有达到预期效果。

$(add).click(function () {
 var inputDiv = Polymer.dom(root_root).querySelector("#inputDiv");
 if(state == 0){
   $(inputDiv).slideDown(300);
  }
 state = 1;
});
 $(cancel).click(function () {
  var inputDiv = Polymer.dom(root_root).querySelector("#inputDiv");
  $(inputDiv).slideUp(300);
  state = 0;
});

https://jsfiddle.net/kkdoneaj/2/

有谁知道如何解决这个问题？

Answer 1

使用Event.stopPropagation()停止点击bubbling从#cancel按钮到父#add div：

$("#cancel").click(function(e) {
    e.stopPropagation();
    ...
});

https://jsfiddle.net/kkdoneaj/3/

Answer 2

你应该放stop

停止匹配元素上当前正在运行的动画。

$(add).click(function () {
  var inputDiv = Polymer.dom(root_root).querySelector("#inputDiv");
  $(inputDiv).stop().slideDown(300);
});
$("#cancel").click(function (e) {
  var inputDiv = Polymer.dom(root_root).querySelector("#inputDiv");
  $(inputDiv).stop().slideUp(300);
  e.stopPropagation();
});

Answer 3

其他人已对stopPropagation()发表了评论，但您也无法展开#inputDiv，除非它已经可见，如下所示：

$(function(){
  $("#add").click(function () {
    if($("#inputDiv").css('display') == 'none'){
      $("#inputDiv").slideDown(1000);
    }
  });
  $("#cancel").click(function () {
    $("#inputDiv").slideUp(1000);
  });
});

触发父div的点击事件

3 个答案: