Question

我正在尝试修改Moderna网站模板。如果您查看标题中的链接并点击Features，您会看到一个下拉菜单。

我要做的是更改它，以便此菜单显示在hover而不是click上，但我似乎无法使其正常工作。

这些是我在......中改变的。

HTML

<div class="navbar-collapse collapse ">
    <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
        <li class="dropdown active">
            <a href="#" class="dropdown-toggle " data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">Features <b class=" icon-angle-down"></b></a>
            <ul class="dropdown-menu">
                <li><a href="typography.html">Typography</a></li>
                <li><a href="components.html">Components</a></li>
                <li><a href="pricingbox.html">Pricing box</a></li>
            </ul>
        </li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>

CSS

header .nav li a:hover,
header .nav li a:focus,
header .nav li.active a,
header .nav li.active a:hover,
header .nav li a.dropdown-toggle:hover,
header .nav li a.dropdown-toggle:focus,
header .nav li.active ul.dropdown-menu li a:hover,
header .nav li.active ul.dropdown-menu li.active a{
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

我尝试将class="dropdown-toggle"更改为

class="dropdown-toggle:hover"
class="hover"
class="dropdown-toggle hover"

我尝试将data-toggle="dropdown"更改为

data-toggle="dropdown hover"
data-toggle="hover"
data-toggle="dropdown-toggle:hover"

但无济于事。我做错了，但我知之甚少（显然）不足以弄明白。

Answer 1

我相信您不希望通过css管理的行为，而是通过javascript管理，然后更改类名称。在这种情况下，捕获并处理的click事件将显示菜单。

修改Dropdown-Toggle for Hover

1 个答案: