嵌入Bootstrap下拉菜单后外层<a>标签失效且样式异常问题求助

嘿，我来帮你搞定这个问题！你遇到的麻烦根源其实是违反了HTML的嵌套规则——<a>是行内元素，按照规范它不能嵌套块级元素（比如你里面的<div class="card">）。浏览器碰到这种非法嵌套时会自动“修正”DOM结构，结果就是外层<a>的跳转逻辑被打乱，样式也跟着出问题了。

下面给你几个靠谱的解决方案，按推荐程度排序：

方案1：重构DOM结构（最推荐，符合规范） #

把外层的<a>拆出来，只让需要跳转的内容（比如职位标题）作为可点击链接，下拉菜单单独放置。这样既符合HTML语义，功能也完全正常：

<div class="card jobs_cards">
  <div class="card-body">
    <!-- 下拉菜单独立放在卡片内 -->
    <div class="dropdown">
      <a href="#" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-bars"></i>
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
    <!-- 跳转链接只包裹需要点击跳转的内容 -->
    <a href="{% url 'jobmanage:job-det' val.id %}" class="card-link">
      <h5 class="card-title">{{val.title}}</h5>
    </a>
    <h6 class="card-subtitle mb-2 text-muted">{{val.cmpny_name.name}}</h6>
    <h5 class="card-subtitle mb-2 text-muted">{{val.salary_start}} - {{val.salary_end}}</h5>
    <p class="card-text">{{val.job_description}}</p>
  </div>
</div>

如果需要整个卡片点击都跳转，同时保留右上角的下拉菜单，就用这个方案：

方案2：用JavaScript实现卡片全局跳转 #

把外层<a>换成<div>，给卡片加点击事件实现跳转，同时给下拉菜单区域添加event.stopPropagation()，避免点击下拉按钮时触发卡片跳转：

<div class="card jobs_cards" onclick="window.location.href='{% url 'jobmanage:job-det' val.id %}'">
  <div class="card-body">
    <!-- 阻止下拉菜单区域的事件冒泡，避免触发卡片跳转 -->
    <div class="dropdown" onclick="event.stopPropagation()">
      <a href="#" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-bars"></i>
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
    <h5 class="card-title">{{val.title}}</h5>
    <h6 class="card-subtitle mb-2 text-muted">{{val.cmpny_name.name}}</h6>
    <h5 class="card-subtitle mb-2 text-muted">{{val.salary_start}} - {{val.salary_end}}</h5>
    <p class="card-text">{{val.job_description}}</p>
  </div>
</div>

再给卡片加个鼠标悬停的指针样式，让用户知道它是可点击的：

.jobs_cards {
  cursor: pointer;
}

方案3：CSS模拟块级链接（不推荐，仅作应急参考） #

如果你实在不想改结构，也可以把外层<a>改成块级元素，同时给下拉按钮加阻止默认跳转的逻辑，但这种方式不符合语义化规范，可能有浏览器兼容性问题：

<a href="{% url 'jobmanage:job-det' val.id %}" class="card-link d-block">
  <div class="card jobs_cards">
    <div class="card-body">
      <div class="dropdown">
        <!-- 阻止下拉按钮触发外层a的跳转 -->
        <a href="#" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="event.preventDefault();">
          <i class="fas fa-bars"></i>
        </a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>
      <h5 class="card-title">{{val.title}}</h5>
      <h6 class="card-subtitle mb-2 text-muted">{{val.cmpny_name.name}}</h6>
      <h5 class="card-subtitle mb-2 text-muted">{{val.salary_start}} - {{val.salary_end}}</h5>
      <p class="card-text">{{val.job_description}}</p>
    </div>
  </div>
</a>

内容的提问来源于stack exchange，提问作者Atif Shafi