Question

我有一个按钮。单击按钮可折叠div。在那个折叠的div中，还有另一个按钮。单击该按钮时，它将折叠另一个div。

现在崩溃了，一切正常，我遇到的问题在于事件。

我尝试过：

  // this fires when I click parent button, 
  // but it also fires when I click the child button << problem
  $("#parentDiv").on("show.bs.collapse", () => {
      console.log("parent");
    });

  // this never fires << problem
  $("#childDiv").on("show.bs.collapse", () => {
      console.log("child");
    });

HTML ：

<button data-toggle="collapse" data-target="#parentDiv" aria-controls="parentDiv"
        aria-expanded="false" aria-label="Toggle parent">Show parent
</button>

<div class="collapse" id="parentDiv">
  <p>This is the parent</p>

  <button data-toggle="collapse" data-target="#childDiv" aria-controls="childDiv" 
          aria-expanded="false" aria-label="Toggle child">Show child
  </button>

  <div class="collapse" id="childDiv">
    <p>This is the child</p>
  </div>
</div>

我最终使用的是什么，为什么。

我首先尝试使用接受的答案，因为这应该是这样做的，但很糟糕，当我更改路线时jQuery无法正常工作，它会中断。

我最终使用了某种看起来像可能重复的答案的代码，因为这似乎是使jQuery可靠运行的唯一方法。

$(document).ready(() => {
   $("#parentDiv").on("show.bs.collapse", (e) => {
     if (e.target.id == "childDiv") {
       //enter code here
     }
   })
});

Answer 1

为了防止在单击子项时执行父事件侦听器，只需添加event.stopPropagation即可防止事件冒泡。

static async Task Main(string[] args)
{
    await BulkImport();
}

// this fires when I click parent button, 
  
  $("#parentDiv").on("show.bs.collapse", () => {
      console.log("parent");
    });

  // this fires on click of child button
  $("#childDiv").on("show.bs.collapse", (e) => {
        //prevent event bubbling up to parent listener
  		e.stopPropagation();
      console.log("child");
    });

为什么我的嵌套折叠元素未触发“显示/显示/隐藏/hidden.bs.collapse”？

1 个答案: