Как изменить эффект зависания на onclick только для выпадающего меню

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 http://www.nationwide.com

Answer 1

Я заметил, вы все еще получили :hover pseudoclass в вашем CSS. Если вы пытаетесь вызвать меню по щелчку, вы не можете использовать :hover pseudoclass. Это не подделка. Итак, ваш первый шаг - заменить псевдокласс с нулевым классом :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'); 
}); 

Эти примеры не являются специфическими для вашего примера, но он должен получить Вас на правильном пути.