Question

使用我的Bootstrap水平导航获取一些关闭行为，由于某种原因，它似乎在第一个<li></li>元素中添加了一个额外的锚链接。

代码：

<li class='submenu'>
<a href='#'>
     <img src='{{ URL::asset('img/menu/performance.png') }}' /> Performance
         <ul class='nav'>
    <li><a href='#'>abc</a></li>
    <li><a href='#'>abc</a></li>
    <li><a href='#'>abc</a></li>
    <li><a href='#'>abc</a></li>
     </ul>
</a>                    
</li>

Chromes Inspector说：

<li class="submenu">
<a href="#">
    <img src="https://xxxxxx/img/menu/performance.png"> Performance

    </a>
    <ul class="nav" style="display: block;"><a href="#">
        </a><li><a href="#"></a><a ref="#">abc</a></li>
        <li><a href="#">abc</a></li>
        <li><a href="#">abc</a></li>
        <li><a href="#">abc</a></li>
    </ul>
</li>

任何人都知道为什么会这样？我hacky使用以下CSS修复它：

.left-nav .submenu li:nth-child(2) > a:first-child {
     display:none;
}

Answer 1

您不应在其他链接中包含任何链接。这不是有效的HTML。

如果浏览器在链接标记内部遇到链接标记，则会添加第一个链接的结束标记。

Answer 2

我在链接中使用链接，导致这种情况发生。我已将辅助<ul>移到锚点选项卡之外，现在它正在运行。

Bootstrap 3水平导航添加锚点

2 个答案: