html - 主下拉菜单文本指向页面，下拉选项指向页面上的 anchor

Question

目前使用我的代码，下拉菜单可以工作并显示其他选项，但是当您单击实际的“交易”文本(菜单的主要文本)时，没有任何反应，它不需要你到预期的页面。

我正在使用最新版本的 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”的页面

我还想要这样，当您将鼠标悬停到“交易”上时，您会看到一个下拉菜单，其中提供了三个选项

<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>

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

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

希望我已经解释得足够专业，可以为我提供一些帮助。

谢谢

Answer 1

使用拆分按钮怎么样？

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

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