时间戳

首页 > 解决方案 > WP Menu Rollover Nav Item 和 Effect DIV Elsewhere

jquery - WP Menu Rollover Nav Item 和 Effect DIV Elsewhere

问题描述

我有一个带有三个导航项的 WP Navigation。我想滚动一个 ID 为 #mega-menu-item-5128 的导航项（三个中的第一个），并将 div ID #ForParents_BlueBar 的显示更改为“block”（它将被 display:none; 隐藏） . 我试过CSS无济于事。所有元素都位于 < header ></header > 标签之间。

#mega-menu-item-5128 是一个 <li>，位于 <nav> 元素中。

#ForParents_BlueBar 是直接在 <nav> 元素和周围的 <div> 元素之后的 <div>。下面是一个简化但准确的表示。

我还包括了一个可以工作的#Hello 测试导航项。这就是为什么我如此困惑。

<div>
  <div>
    <nav>
      <ul> 
        <li id="mega-menu-item-5128"><a class="mega-menu-link" href="#" tabindex="0">For Parents</a></li>
      </ul>
    </nav>
  </div>
</div>
<div class="TestHello" id="Hello"><a href="#">Hello</a> </div>
<div class="Submenu_Container">
  <div id="ForParents_BlueBar">
    [Max Mega Menu Plugin Code]
  </div>
</div>

出于测试目的，我只是将填充变大并应用了边框，这样我就可以轻松查看我是否正确钩住了，我有这个 CSS：

#mega-menu-item-5128:hover ~ #ForParents_BlueBar {
  /*display:none!important;*/
  border: 2px solid red !important;
  padding: 40px !important;
}

这没用。

我也尝试过 jQuery（通过 functions.php 添加）。

function addCustomScript(){
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
  $('#mega-menu-item-5128').hover(function() {
      $('#ForParents_BlueBar').attr('style', 'padding: 100px !important');
  }, function() {
      $('#ForParents_BlueBar').attr('style', 'padding: 0px !important');
  });
});
    $(document).ready(function () {
  $('#Hello').hover(function() {
      $('#ForParents_BlueBar').attr('style', 'padding: 100px !important');
  }, function() {
      $('#ForParents_BlueBar').attr('style', 'padding: 0px !important');
  });
});
</script>
<?php
}
add_action('wp_head', 'addCustomScript');

这对导航没有任何作用，但测试#Hello 有效。

我一直在尝试我能想到的一切，以及我在互联网上能找到的一切，但没有任何效果。

任何帮助将非常感激。

标签： jquerycsswordpressnavigationhover

解决方案

在 Max Mega Menu 的帮助下，我发现有一个禁用 jQuery 的设置。我的代码现在可以工作了。

如果您使用的是 Max Mega 菜单：

转到 Mega Menu > Menu Locations > Advanced 并禁用“Unbind JavaScript Events”

推荐阅读