Bootstrap Dropdown Active悬停时打开,单击时链接
Bootstrap Dropdown Active open on hover and link on click
我一直在尝试修改django-oscar的导航栏菜单。http://latest.oscarcommerce.com/en-gb/
我无法理解的是,"浏览商店"菜单在主页上的页面加载时仍然打开,但在所有其他页面上点击时打开。我不明白为什么会发生这种事。有没有办法让它在悬停时打开,并在单击时添加<a>
标记?
这是关于oscar文档中相关部分的html模板-
<div class="navbar-collapse primary-collapse collapse">
{% block nav_dropdown %}
<ul id="browse" class="nav navbar-nav">
<li class="dropdown active {% if expand_dropdown %}open{% endif %}">
<a href="#" class="dropdown-toggle" {% if not expand_dropdown %} data-toggle="dropdown"{% endif %}>
<span class="nav-line-1">Shop by</span><span class="nav-line-2"> Category</span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu" data-navigation="dropdown-menu">
{% category_tree depth=2 as tree_categories %}
<li><a tabindex="-1" href="{% url 'catalogue:index' %}">{% trans "All products" %}</a></li>
{% if tree_categories %}
<li class="divider"></li>
{% for tree_category, info in tree_categories %}
{% if info.has_children %}
<li class="dropdown-submenu">
<a tabindex="-1" href="{{ tree_category.get_absolute_url }}">{{ tree_category.name }}</a>
<ul class="dropdown-menu">
{% else %}
<li><a tabindex="-1" href="{{ tree_category.get_absolute_url }}">{{ tree_category.name }}</a></li>
{% endif %}
{% for close in info.num_to_close %}
</ul></li>
{% endfor %}
{% endfor %}
{% endif %}
</ul>
</li>
{% block nav_extra %}
{% endblock %}
</ul>
{% endblock %}
</div><!-- /navbar-collapse -->
</div>
主菜单之所以这样做,是因为你在<li class="dropdown active"
上有一个open
的矩阵,而在其他页面上没有,我只是检查了网站,这迫使菜单打开。
关于你的问题,它的行为与其他页面不同,点击即可打开。这是因为您忘记在<li class="dropdown active"
下方的a
标记上添加data-toggle="dropdown"
。菜单代码应符合主页上的以下内容:
<ul id="browse" class="nav">
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Browse store<b class="caret"></b></a>
<ul class="dropdown-menu" data-navigation="dropdown-menu" style="width: 212px;">
<li><a tabindex="-1" href="/en-gb/catalogue/">All products</a>
</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="/en-gb/catalogue/category/books_1/">Books</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="/en-gb/catalogue/category/books/fiction_2/">Fiction</a>
</li>
<li><a tabindex="-1" href="/en-gb/catalogue/category/books/non-fiction_4/">Non-Fiction</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li><a href="/en-gb/offers/">Offers</a>
</li>
</ul>
</li>
</ul>
你想让它在悬停时打开,我想你可以考虑使用JQuery,也许可以检查菜单是否已经悬停,然后添加这样的打开类:
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
好运
相关文章:
- 将纯文本URL转换为可单击链接
- 阻止在单击链接后转到页面顶部
- 单击链接时停止运行javascript
- 单击链接时如何将引导程序转盘旋转到特定位置
- 通过单击链接(兄弟姐妹?)从无线电输入中获取id
- Jquery UI日期选择器没有'单击链接时不会再次显示
- javascript警报框中的可单击链接
- 停止触摸滚动还可以防止单击链接
- 单击链接时设置cookie
- 如何区分用户单击链接和在 UIWebView 中执行自动重定向的页面
- 使用 jQuery 单击链接时更改链接背景颜色
- 单击链接时添加另一个选项
- 禁用触摸设备上的单击链接未按预期工作
- 如何在单击链接后将局部变量发送到部分呈现
- 单击链接时折叠响应式导航
- 单击链接时取消“点击”JS
- 单击链接后显示加载程序
- 更改类后单击链接将不起作用
- 在PHP代码中单击链接javascript函数调用
- 如何在单击链接时为不同的输入字段提供不同的值