主下拉菜单文本指向页面，下拉选项指向页面上的锚点答案

【问题标题】：Main dropdown menu text directs to a page, dropdown options direct to anchor points on the page主下拉菜单文本指向页面，下拉选项指向页面上的锚点
【发布时间】：2017-02-19 14:11:43
【问题描述】：

目前使用我的代码，下拉菜单可以工作并显示其他选项，但是当您单击实际的“交易”文本（菜单的主要文本）时，什么也没有发生，它不需要您前往预期的页面。

我正在使用最新版本的 Bootstrap

<li class="dropdown">
  <a href="trading.html" class="dropdown-toggle" data-toggle="dropdown">Trading <span class="caret"></span></a>
  <div class="dropdown-menu">
    <ul>
       <li><a href="a.html">Product Group A</a></li>
       <li><a href="b.html">Product Group B</a></li>
       <li><a href="c.html">Product Group C</a></li>
    </ul>
  </div>
</li>

以上代码是导航栏的一部分。

我脑海中的画面是这样的：当你点击菜单按钮“交易”时

<a href="trading.html" class="dropdown-toggle" data-toggle="dropdown">Trading <span class="caret"></span></a>

我需要它带你进入 href 指向“trading.html”的页面

我也想要它，这样当您通过“交易”hover 时，您会看到一个下拉菜单，其中提供了三个选项

<div class="dropdown-menu">
    <ul>
       <li><a href="anchor point A on trading">Product Group A</a></li>
       <li><a href="anchor point B on trading">Product Group B</a></li>
       <li><a href="anchor point C on trading">Product Group C</a></li>
    </ul>
  </div>

我计划创建包含三个部分的“交易”页面，每个部分都有自己的锚点，下拉菜单中的每个产品组都有一个。

当您点击“交易”时，我希望它带您到页面顶部。但是，假设您点击“产品组 B”，我希望它带您到“交易”页面，但带您到链接到该部分的页面上的锚点。

希望我已经解释得很清楚，足以让专业人士理解，并且可能会为我提供一些帮助。

谢谢

【问题讨论】：

标签： html css twitter-bootstrap navbar nav

【解决方案1】：

使用拆分按钮怎么样？

http://codepen.io/Sixl/pen/VPJawG?editors=1111

由于某种原因，在组内使用 <a class="btn"> 而不是 <button class="btn"> 时，“主按钮”的样式会有所不同。因此，您需要更正样式以将其与普通锚标记一起使用。不过应该不会太麻烦

【讨论】：