css - 可点击的下拉菜单 - 它们是如何工作的？

Question

在我当前元素的主题上，有一个可单击的下拉菜单，当您单击它时，会打开它。 The website有一个从 themeforest 购买的主题，其中包含几个必需的插件，所以我不知道插件是否对此负责。

是的，我知道这个网站运行 WooCommerce，这个社区有点回避它，但是我想在我下个月即将构建的私有(private) WordPress 主页中实现这种功能。

我所说的下拉菜单是当你点击右侧的“% items”时

我真的很好奇如何完成这项工作。需要 JavaScript，不是吗？ 正常的下拉菜单通过“:hover”重新定位菜单来工作，或者简单地用“display:block”覆盖“display:none”。

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

edit01:这是当前状态: site_template.php - 应该完成 css已添加到相应的css文件中 dropdown.js 已创建并已添加代码 dropdown.js 到 site_template.php 的实现已完成

但是我仍然觉得我错过了一些 JS 方面的东西......

edit02:我通过 Google 和此处提供的信息解决了问题。 摘要:

• 我在我的头脑中实现了来自 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>

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