Question

JSFiddle演示版： https://jsfiddle.net/2yx16k8L/

我需要此JS代码才能在单击时打开整个DIV。但是，这会禁用下拉菜单中的模式按钮。它将不再打开模式。

我该怎么办？

HTML：

<div class="project__body" onclick="location.href='next.html';">
  <div class="row">
    <div class="col-10">
      <h1>Title of the DIV!</h1>
    </div>
    <div class="col-2 text-right">
      <div class="dropdown">
        <button type="button" class="dropdown-btn dropdown-toggle" data-toggle="dropdown">Menu</button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="edit.html">Edit</a>
          <a class="dropdown-item" href="delete.html">Delete</a>
          <a class="dropdown-item" data-toggle="modal" data-target="#modal">Copy</a>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <p>There's more content here in this div. There's more content here in this div. There's more content here in this div. </p>
    </div>
  </div>

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modal">Title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">x</button>
        </div>
        <div class="modal-body">
          Body of the modal
        </div>
      </div>
    </div>
  </div>

JS：

$('.dropdown').click(function(event) {
  $(this).children(".dropdown-menu").toggle()
  event.stopPropagation();
})

Answer 1

添加此内容：

$(".dropdown-item[data-target='#modal']").click(function(){
    $("#modal").modal("show");
});

演示： https://jsfiddle.net/q31juvra/

Javascript禁用Bootstrap 4中的模式弹出按钮

1 个答案: