时间戳

首页 > 解决方案 > Wordpress 响应式下拉菜单 - 第一次单击忽略链接并打开下拉菜单，第二次单击转到 url

javascript - Wordpress 响应式下拉菜单 - 第一次单击忽略链接并打开下拉菜单，第二次单击转到 url

问题描述

我正在为 wordpress 网站开发响应式菜单。

在移动屏幕上，我需要在第一次单击时忽略子菜单父链接，同时显示子菜单，然后如果第二次单击它将导航到其 URL。

当我的 javascript 正常工作时，它将通过检查其显示类来检查子菜单是否可见。如果显示设置为“无”，它将使父元素忽略其链接并通过将显示更改为“阻止”使子菜单可见。

我已经看到了几个相关的问题/答案，但都使用了 JQuery，因为我正在尝试使用 vanilla java 脚本来完成解决方案。

这是我的html结构的示例：

<nav class="nav nav--primary">
<ul id="menu-primary-navigation" class="nav--primary--links">
  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-49">
      <a href="https://www.google.com">Test 1
        <ul class="sub-menu">      
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50">
            <a href="">FAQ'S</a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51">
            <a href="">Your Stories</a>
          </li>
        </ul>
      </a>                
  </li> 
 <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-49">
      <a href="https://www.google.com">Test 2
        <ul class="sub-menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52">
            <a href="">Sub Link 1</a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54">
            <a href="">Sub Link 2</a>
          </li>
        </ul>
      </a>                
  </li>


这是我的CSS： 

.logo{
margin: 0.625em;
}

.menu-item-has-children {
> a {
  &::after {
    background-repeat: no-repeat;
    background-size: 23px;
    height:13px;
    width:25px;
    margin-left: 30px;
    content: "";
    display: inline-block;

  }
 }
}

.nav--primary ul 
{
    list-style: none outside none;
}

.nav--primary li a 
{
    line-height: 25px;
}

.nav--primary > ul > li > a 
{
    color: #3B4C56;
    display: block;
    font-weight: normal;
    position: relative;
    text-decoration: none;
}

.nav--primary li.parent > a 
{
    padding: 0 0 0 28px;
}

.nav--primary li.parent > a:before 
{
    content: ""; 
    display: block;
    height: 21px;
    left: 0;
    position: absolute;
    top: 2px;
    vertical-align: middle;
    width: 23px;
}

.nav--primary ul li.active > a:before 
{
    background-position: 0 center;
}

.sub-menu
{
    display: none;
    margin: 0 0 0 12px;
    overflow: hidden;
    padding: 0 0 0 25px;
}

.nav--primary ul li ul li 
{
    position: relative;
}

.nav--primary ul li ul li:before 
{
    content: "";
    left: -20px;
    position: absolute;
}

这是我的javascript：

const subLink = document.getElementsByClassName("menu-item-has-children");
const subMenu = docuument.getElementsByClassName("sub-menu")

for (var i = 0; i < subLink.length; i++) {
  subLink[i].addEventListener("click", function(event){
  if (subMenu.style.display === 'none'){
    return false;
    subMenu.style.display = "block";
  }
});
}

我还包含了一个 codepen 链接： https ://codepen.io/matthewoproctor/pen/PoYzPxa

谁能告诉我哪里出错了？

标签： javascripthtmlcsswordpressresponsive-design

解决方案

您应该检查元素是否具有类标记，例如“下拉打开”。如果它不存在，您应该添加它，然后显示您的下拉菜单，如果它存在，您应该更改项目链接上的 window.location。我认为你不应该使用

<a href="some_link_here"></a>

如果您想将其用作下拉菜单项，则作为菜单项。随它去

<p class="dropdown" link="some_link_here"></p>

var dropdowns = document.getElementsByClassName("dropdown");
for(var i = 0; i < dropdowns.length; i++)
{
    dropdowns[i].addEventListener("click", dropdownClick())
}

dropdownClick(event)
{
   if (!event) {
           event = window.event; // Older versions of IE use 
                                 // a global reference 
                                 // and not an argument.
    }
    var el = (event.target || event.srcElement); // DOM uses 'target';
                                                 // older versions of 
                                                 // IE use 'srcElement'
    if(!el.classList.contains("dropdown-opened"))
       el.classList.Add("dropdown-opened");
       some_script_to_open_dropdown_menu();
    else
    {
       window.location = el.attributes["link"];
    }
}

我没有检查上面的代码，所以它可能包含一些语法错误，但它是纯js。您应该添加的另一件事-通过单击不在下拉菜单或下拉菜单上来隐藏菜单，这是另一项任务，但这并不难

推荐阅读