时间戳

首页 > 解决方案 > 使除下拉列表之外的整个 DIV 可点击

javascript - 使除下拉列表之外的整个 DIV 可点击

问题描述

我正在尝试使整个 DIV 可点击并使其正常工作。但是，我想对下拉菜单做一个例外。单击此下拉菜单button不应打开next.html。它目前打开下拉菜单，但也很快打开next.html。我该怎么做？

演示：https://jsfiddle.net/40wntLyo/

<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</a>
            <a class="dropdown-item" href="#">Delete</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>

标签： javascriptjqueryhtmlbootstrap-4

解决方案

首先，您必须删除内联 javascript 事件并尝试以下示例：

jQuery：

$('.dropdown').click(function(event){
    event.stopPropagation();
    $('.dropdown-menu').toggle();
})
$('.project__body').click(function(){
   window.location.href="next.html"
})

html:

<div class="project__body">
  <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</a>
            <a class="dropdown-item" href="#">Delete</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>

推荐阅读