Выпадающие выпадающие списки - Как они работают?

Question

В моей теме текущего проекта есть раскрывающееся меню с возможностью щелчка, которое открывается, ну .. когда вы нажимаете на него. The website имеет купленную тему из themeforest с несколькими необходимыми плагинами, поэтому я не знаю, отвечает ли за это плагин или нет.

Да, я знаю, что на этом сайте работает WooCommerce, которая отчасти избегает этого сообщества, однако я хочу реализовать эту функцию на своей частной домашней странице WordPress, которую я собираюсь построить в следующем месяце.

Раскрывающееся меню Я говорю о том, когда вы нажимаете на «% пункты» на правой стороне

мне действительно любопытно, как сделать эту работу. Требуется Javascript, не так ли? Как обычно, выпадающие меню работают, перемещая меню через «: hover» или просто переписывая «display: none» с помощью «display: block».

Спасибо за любую помощь с помощью этой темы!

edit01: Вот текущий статус: site_template.php - должна быть завершена CSS была добавлена ​​в соответствующий CSS-файл dropdown.js был создан, и код был добавлен реализации dropdown.js в site_template.php сделано

Однако я все еще чувствую, что я что-то JS-мудрый хватает ...

edit02: Я решил пр облема с Google и предоставленной здесь информацией. Резюме:

• Я реализовал jquery.js от Google в голове моей site_template.php.
• Я скопировал код, указанный здесь, в свой dropdown.js.
• Я изменил предоставленный CSS немного, чтобы соответствовать моей точной ситуации.

Теперь он работает по назначению и открывается, как только я нажимаю <a> -Уровень, указанный для указанной цели.

Answer 1

Да, вам нужно как JS и CSS, чтобы получить, что для работы:

Jquery:

$(document).ready(function(){ 

    $('a.dropdown-toggle').click(function(){ 
     $('div.dropdown').toggleClass("open"); 
     event.preventDefault(); 
    }) 

}) 

CSS:

div.dropdown { 
     display: none; 
    } 
.open > .dropdown-menu { 
     display: block; 
    } 

HTML:

<div class="dropdown"> 

    <a href="#" class="dropdown-toggle">% items</a> 

    <div class="dropdown-menu"><!-- items dropdown--></div> 

</div> 

Если у вас возникли проблемы с созданием сценариев или внедрением кода, просто прокомментируйте.