首页 > 解决方案 > Bootstrap 下拉菜单不会在不滚动的情况下在附加位置打开

问题描述

我的网页的下拉导航菜单有问题;这是基于我特别喜欢的一款老电子游戏的界面。我已经用 Bootstrap 3.3.7 设置了一个叫做“附加”的东西,这样当用户向下滚动超过某个点时,菜单按钮将出现在页面右侧的固定位置,而不是到其在中心的默认位置。我之前注意到,在这个位置,如果用户单击按钮,除非用户向上或向下滚动,否则菜单不会出现。我一直不明白为什么会这样。

但是,现在,可能是由于 Bootstrap 的更新版本,单击按钮然后按向上或向下箭头不会向下滚动。它确实使菜单出现,但它在跳回页面顶部并使用允许用户使用箭头键选择菜单项的新功能时这样做。我仍然可以在单击后使用滚动条,而不是使用向下箭头,这仍然使菜单出现在正确的位置。但是,当然,这很尴尬,可能不是大多数用户会想到的事情。

我只是希望下拉菜单在词缀位置上的功能与在默认位置上的方式相同,但我不知道该怎么做。

这是我用于按钮和菜单本身的标记:

<button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" data-spy="affix" data-offset-top="231">
Where to?
<img id="feet-icon" src="feet-icon.png" alt="feet icon" />
            </button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1" data-spy="affix" data-offset-top="231">
<li id="li-top" class="othernavbar"><a href="#downloads">Downloads</a></li>
<li class="othernavbar normal"><a href="#images">Game Images</a></li>
<li class="othernavbar normal"><a href="#icons">Icons</a></li>
<li class="othernavbar normal"><a href="#music">Music</a></li>
<li id="li-bottom" class="othernavbar"><a href="https://bdferr.github.io">My Homepage</a></li>
</ul>

我的样式表在这里

我已确保在文档头部对 Bootstrap 的引用之前包含了对 jQuery (2.2.4) 的引用。

标签: htmlcsstwitter-bootstrap-3drop-down-menu

解决方案


推荐阅读