Question

我已经尝试了所有我能想到的内容，并且我无法让我的测试网站采取与点击时向上移动的示例网站按钮菜单类似的行为（此时我的仅适用于悬停）。我尝试了多个下拉菜单，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 My site http://www.nationwide.com Site I'm trying to get to function like

Answer 1

我注意到你的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');
});

这些示例并非特定于您的示例，但它应该让您走上正确的轨道。

如何仅为下拉菜单将悬停效果更改为onclick

1 个答案: