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.jssite_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>

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