Bootstrap Dropdown Active 在悬停时打开并在点击时链接答案

【问题标题】：Bootstrap Dropdown Active open on hover and link on clickBootstrap Dropdown Active 在悬停时打开并在点击时链接
【发布时间】：2015-11-08 01:39:15
【问题描述】：

我一直在尝试修改 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>

【问题讨论】：

标签： javascript jquery css twitter-bootstrap django-oscar

【解决方案1】：

主菜单这样做的原因是因为您在<li class="dropdown active" 上具有open 的属性，而在其他页面上却没有，我刚刚检查了该站点，这迫使菜单打开。

关于您的问题，它与其他页面的行为不同并且在点击时打开。这是因为您忘记在a 标记上添加data-toggle="dropdown"，就在<li class="dropdown active" 下方。主页上的菜单代码应如下所示：

<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'); 
});

祝你好运

【讨论】：