Bootstrap Dropdown Active在悬停时打开,并在单击时链接 [英] Bootstrap Dropdown Active open on hover and link on click
问题描述
我一直在尝试修改django-oscar的导航栏菜单. http://latest.oscarcommerce.com/en-gb/
I have been trying to modify django-oscar's navbar menu. http://latest.oscarcommerce.com/en-gb/
我不知道的是,菜单浏览商店"在主页加载页面时仍然保持打开状态,而在其他所有页面上单击时都打开.我不知道为什么会这样.有没有办法使其悬停打开并在点击时添加<a>
标签?
What I can't figure out is that the menu 'browse store' remains open on page load on homepage but opens on click on all other pages. I can't figure out why that would happen. Is there a way to to make it open on hover and to add an <a>
tag on click?
这是与奥斯卡文档中相关部分有关的html模板-
This is the html template concerning the related part in oscar's documentation -
<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
属性,我刚刚检查了站点,这迫使菜单打开.
The reason the home menu is doing that is because you have a atribute of open
on the <li class="dropdown active"
and on the other pages you don't, I just checked the site and that is forcing the menu open.
关于您的问题,它的行为与其他页面不同,请点击打开.这是因为您忘记在<li class="dropdown active"
下方的a
标记上添加data-toggle="dropdown"
.菜单代码应与主页上的以下代码相同:
About your issue with it not behaving the same as the other pages and opening on click. This is becuase you forgot to add the data-toggle="dropdown"
on the a
tag just beneath <li class="dropdown active"
. The menu code should be as per the following on the homepage:
<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进行调查,并可能检查菜单是否悬停在上面,然后添加如下所示的打开类:
You wanted to have it open on hover, i think yo ucan look into using JQuery and maybe checking if the menu has been hovered on and then adding the open class like this:
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
祝你好运
Good Luck
这篇关于Bootstrap Dropdown Active在悬停时打开,并在单击时链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!