Question

我正在使用bootstrap并创建了一个下拉菜单。主要项目是在主页上有效但不在子页面上的链接。

这是我的代码：

<li>
  <a href="/preview/#design-centre" class="dropdown-toggle scroll" 
     data-toggle="dropdown" data-hover="dropdown">
    Design Centre <i class="fa fa-angle-down"></i>
  </a>
  <ul class="menulist dropdown-menu">
    <li><a href="/preview/#design-centre">Overview</a></li>
    <li><a href="/preview/design-centre.php?action=video-testimonials">Video Testimonials</a></li>
    <li><a href="/preview/design-centre.php?action=meet-the-team">Meet The Team</a></li>
    <li><a href="/preview/design-centre.php?action=faq">FAQ</a></li>
    <li><a href="/preview/design-centre.php?action=contact-us">Contact Us</a></li>
  </ul>
</li>

当我点击Design Center时，它不会在子页面上执行任何操作，但在主页上它会执行任何操作，导航中但不是下拉菜单的所有其他链接都可以正常工作。

Answer 1

这个应该正常工作。您尝试做的事情本身与Bootstrap无关，只是尝试使用锚链接在文档中导航，也可以导航到另一个文档的片段。这只是标准的HTML标记。

fragment identifier是URI的一部分：

指资源中的位置

只要这些链接单独工作，它们就应该在您的代码中工作。

有些事情可能会弄乱它：

如果您使用的是相对网址，则地址将根据您在导航中的位置而更改。由于您使用斜杠开始您的href地址，因此情况似乎并非如此。
您可以尝试转换以下行：
```
<li><a href="/preview/#design-centre">Overview</a></li>
```
对此（假设您的根页为 index.html ）：
```
<li><a href="/preview/index.html#design-centre">Overview</a></li>
```
有时页面可以由您的资产管道推断，但通常最好是明确的。

Here's a working example in plunker

And here's a runnable version，其中包含主页和包含工作片段的子页

除此之外，我们需要更多信息来诊断。如果它仍然不起作用，请尝试分叉，并添加任何明显显示问题的更改。

Answer 2

请检查页面的源代码中是否有<a>元素（可能是锚name，通常也与{#一起使用。 1}}属性）。可能没有，但主页会有。它意味着用作一种页内导航。单击末尾具有哈希（id）的链接会触发浏览器查找具有相应Override software rendering list的元素，并滚动视口以使其位于顶部。

Answer 3

试试这个jsfiddle

<li class="dropdown">
        <a href="/preview/#design-centre" class="dropdown-toggle disabled" 
     data-toggle="dropdown" data-hover="dropdown">
    Design Centre <i class="fa fa-angle-down"></i>
  </a>
  <ul class="menulist dropdown-menu" role="menu">
    <li><a href="/preview/#design-centre">Overview</a></li>  
  </ul>
 </li>

Answer 4

因为这是一个下拉列表。我认为您不需要将href添加到锚标记。

你可以在href中保留一个＃。

这是更新后的代码，

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<ul style="position:relative">
<li>
  <a href="#" class="dropdown-toggle scroll" 
     data-toggle="dropdown" data-hover="dropdown">
    Design Centre <i class="fa fa-angle-down"></i>
  </a>
  <ul class="menulist dropdown-menu">
    <li><a href="/preview/#design-centre">Overview</a></li>
    <li><a href="/preview/design-centre.php?action=video-testimonials">Video Testimonials</a></li>
    <li><a href="/preview/design-centre.php?action=meet-the-team">Meet The Team</a></li>
    <li><a href="/preview/design-centre.php?action=faq">FAQ</a></li>
    <li><a href="/preview/design-centre.php?action=contact-us">Contact Us</a></li>
  </ul>
</li></ul>

＆＃13;

Bootstrap下拉菜单 - 不在子页面上工作

4 个答案:

Here's a working example in plunker