WP菜单翻转导航项和效果DIV别处

Question

我有一个有三个导航项的WP导航。我想滚动一个导航项(三个中的第一个)，ID为# megumenu -item-5128，并将div ID为#ForParents_BlueBar的显示更改为"block"(它将通过display:none;隐藏)。我尝试过CSS，但无济于事。所有元素都位于

#mega-menu-item-5128是一个<李比;安置在><资产净值比;>

元素。#ForParents_BlueBar是一个<资产净值比;元素及其周围><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>

为了测试的目的，我只是把padding变大，并应用一个边框，这样我就可以很容易地看到我是否正确地钩住了，我有这样的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测试可以工作。

我已经尝试了我能想到的所有方法，以及我在网上能找到的所有方法，但都没有用。

任何帮助都将非常感激。

Answer 1

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

如果您正在使用最大Mega菜单:

进入Mega Menu>菜单位置>高级和禁用"取消绑定JavaScript事件">