javascript - 如何将悬停效果更改为仅用于下拉菜单的onclick

我已经尝试了所有可能想到的方法，但我无法让测试站点的行为类似于单击时向上移动的示例站点按钮菜单（现在，我的菜单仅在悬停时有效）。我尝试了多个下拉菜单，javascript，css，手风琴菜单，伪造的单击教程等，但这些内容对我的网站均无效。

除了onclick函数之外，我所有的东西都能正常工作。仅当我首先单击按钮时，如何才能在网站上获得当前的悬停效果以进行触发？另外，当我单击另一个按钮时，前一个按钮会折叠回到其正常状态，而新单击的按钮会像悬停状态一样打开？

我认为悬停效果只是烦人/忙碌，我需要使其对移动设备响应，因此onclick似乎是最好的方法。

我已经附上了我所指的按钮的图片，指向我的网站的链接以及我想要使其正常工作的示例网站以及CSS和html。如果有人可以帮助您，您将成为世界上最神奇的人！！！

<div class="wrapper clearfix" id="insurance-buttons">
        <ul>
            <li><a href="#">Auto</a>
                <ul>
                    <li><a href="#">Auto</a></li>
                    <li><a href="#">Motorcycle</a></li>
                    <li><a href="#">Boat</a></li>
                    <li><a href="#">ATV</a></li>
                </ul>
             </li>
             <li><a href="#">Home</a>
                <ul>
                    <li><a href="#">Homeowners</a></li>
                    <li><a href="#">Condo / Co-op</a></li>
                    <li><a href="#">Flood Insurance</a></li>
                </ul>
             </li>
             <li><a href="#">Life &amp; Health</a>
                <ul>
                    <li><a href="#">Umbrella</a></li>
                    <li><a href="#">Life</a></li>
                    <li><a href="#">Health</a></li>
                </ul>
             </li>
             <li><a href="#">Business</a>
                <ul>
                    <li><a href="#">Business Owners</a></li>
                    <li><a href="#">General Liability</a></li>
                    <li><a href="#">Commercial Auto</a></li>
                    <li><a href="#">Workers Compensation</a></li>
                </ul>
             </li>
        </ul>
</div>


#insurance-buttons a {
    display: block;
    text-decoration: none;
}
#insurance-buttons ul li ul li {
    width: 100%;
    padding: 3px;
    background: #fff;
    z-index:1;
}
#insurance-buttons ul li ul li a {
    font-variant: small-caps;
    font-size:24px;
    line-height:25px;
    padding: 15px 0 !important;
}
#insurance-buttons li{
    position:relative;
    float:left;
}
#insurance-buttons ul li ul, #insurance-buttons:hover ul li ul, #insurance-buttons:hover ul li:hover ul li ul {
    display:none;
    list-style-type:none;
    width: 101%;
}
#insurance-buttons:hover ul, #insurance-buttons:hover ul li:hover ul, #insurance-buttons:hover ul li:hover ul li:hover ul {
    display:block;
}
#insurance-buttons:hover ul li:hover ul {
    position: absolute;
    margin-top: 1px;
    margin-left:-3px;
}
#insurance-buttons>ul>li:hover>ul {
    bottom:100%;
    border-bottom: 1px solid transparent;
}

#insurance-buttons ul {
    width:100%;
}
#insurance-buttons ul li {
    width:25%;
    float:left;
    text-align:center;
    text-transform:uppercase;
    font-size:42px;
    line-height:42px;
    font-family: 'Khand', sans-serif;
    font-weight: 500 !important;
    color:#fff;
}
#insurance-buttons ul li a {
    text-decoration:none !important;
    padding:10px 15px !important;
    border-right: 4px solid  #fff;
}
#insurance-buttons ul li a:last-child {
    border-right: none;
}

http://www.taggrafx.com/testing/CIA/index.html

http://www.nationwide.com

最佳答案

我注意到您的CSS中仍然有:hover伪类。如果试图在单击时触发菜单，则不能使用:hover伪类。没有伪造。因此，第一步是将:hover伪类替换为适当的类。这是一个通用示例：

/* change anything like this */
.my-element:hover { ... styles ... }

/* to this */
.my-element.hover { .. styles ... }

在下一部分中，我将假设使用jQuery，因为它编写起来更快，更容易。

然后，您需要检测对元素的单击，应用该类，然后将其从其他元素中删除。可以这样完成：

$('.my-element').on('click', function(e) {
  e.preventDefault();

  // remove .hover class from all other elements
  $('.my-element').removeClass('hover');

  // apply it to the current element
  $(this).addClass('hover');
});

这些示例并非特定于您的示例，但可以使您走上正确的道路。