可点击的下拉菜单 - 它们如何运作？

Question

在我当前项目的主题上，有一个可点击的下拉菜单打开，当你点击它时。 The website已经从themeforest购买了一些带有几个必需插件的主题，因此我不知道插件是否对此负责。

是的，我知道这个网站运行的WooCommerce有点被这个社区所避免，但是我想在我的私人WordPress主页中实现这种功能，我将在下个月建立。

我在谈论的下拉菜单是指您点击＆＃34;％项目＆＃34;在右侧

我真的好奇如何做这项工作。 Javascript是必需的，不是吗？ 正常的下拉菜单通过＆＃34;重新定位菜单来实现：hover＆＃34;或者只是覆盖一个＆＃34; display：none＆＃34;使用＆＃34; display：block＆＃34;。

感谢您对此主题的任何帮助！

edit01：以下是当前状态： site_template.php - 应该完成 css已被添加到相应的css文件中 dropdown.js已创建，代码已添加 将dropdown.js实现到site_template.php完成

然而，我仍然觉得我错过了JS-wise ......

edit02：我解决了谷歌及此处提供的信息的问题。 总结：

• 我在Google的头脑中实现了jQuery.js 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>

如果您在排队脚本或实施代码时遇到问题，请发表评论。