我的网站基于 WordPress，页面是通过点击菜单上的 ajax 加载的。我的菜单是垂直的，带有固定面板类型的侧边栏。单击网站上的菜单图标时，菜单面板将显示，并在单击链接/菜单后隐藏。
我的问题是，从面板单击菜单/链接后，页面通过 ajax 加载，加载页面后，菜单按钮不起作用，面板不再打开。我已经尝试过：
jQuery(document).on('click', '#menu', function(){ //你的代码在这里});
这是我的 JS 代码。请检查并告诉我我在这里做错了什么？
<script type="text/javascript">
// Dropdown Menu Code for vertical menu panel
jQuery(document).ready(function(){
jQuery("li.menu-item-has-children ul").hide();
});
jQuery(document).on("click", "li.menu-item-has-children a", function() {
jQuery(this).next("ul").toggle();
});
// This jQuery code For Automaticly Hide Panel after onclick a link
jQuery(document).on('click','li.menu-item a', function(){
var href = jQuery(this).attr('href');
// If link has no value then don't jQuery will don't tigger
if (href === undefined || jQuery.trim(href) === '') {
//event.preventDefault();
console.log('No href value');
}else{
jQuery('section.side_menu').removeClass('open-menu');
jQuery('#side_menu_button_links').removeClass('open');
}
});
// Menu button on click panel will open/close
jQuery(document).on('click','#side_menu_button_links', function(){
if(jQuery(this).hasClass('open')){
jQuery(this).removeClass('open');
jQuery('section.side_menu').removeClass('open-menu');
}else{
jQuery(this).addClass('open');
jQuery('section.side_menu').addClass('open-menu');
}
});
//Close Menu on click Panel X icon.
jQuery(document).on('click','a.close_my_menu', function(){
jQuery('section.side_menu').removeClass('open-menu');
jQuery('#side_menu_button_links').removeClass('open');
});
</script>
这是一步一步的HTML
** 菜单按钮代码。单击此打开面板 **
<div class="header_inner_right">
<div class="side_menu_button_wrapper right">
<div class="side_menu_button" style="height: 85px;">
<span class="side_menu_button_text">Menu </span>
<a id="side_menu_button_links" class="side_menu_button_links large open" href="javascript:void(0)">
<span aria-hidden="true" class="qode_icon_font_elegant icon_menu "></span> </a>
</div>
</div>
</div>
面板 HTML 代码
<section class="side_menu right light open-menu" style="overflow-y: hidden; outline: none;" tabindex="5000">
<div class="side_menu_title">
<h5>MENU</h5>
</div>
<a href="#" target="_self" class="close_my_menu"></a>
<div id="nav_menu-5" class="widget widget_nav_menu posts_holder">
<div class="menu-main_menu-container">
<ul id="menu-main_menu" class="menu">
<li id="menu-item-15350" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-14869 current_page_item menu-item-15350"><a href="http://website.com/">Home</a>
</li>
<li id="menu-item-15369" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-15369"><a>About Us</a>
<ul class="sub-menu" style="display: block;">
<li id="menu-item-15487" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15487"><a href="http://website.com/who-we-are/">Who We Are</a>
</li>
<li id="menu-item-15445" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15445"><a href="http://website.com/our-tem">Our Team</a>
</li>
</ul>
</li>
<li id="menu-item-15372" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15372"><a href="http://website.com/per-coverages">Personal Coverages</a>
</li>
<li id="menu-item-15370" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15370"><a href="http://website.com/com-coverages">Commercial Coverages</a>
</li>
<li id="menu-item-15373" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15373"><a href="http://website.com/benefits">Group Benefits</a>
</li>
<li id="menu-item-15357" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15357"><a href="http://website.com/quote">Get a Quote</a>
</li>
<li id="menu-item-15371" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15371"><a href="http://website.com/contact">Contact</a>
</li>
</ul>
</div>
</div>
</section>
我使用不同的点击 jquery替换if/else方法修复了它。这是我当前的 jquery 代码：
jQuery 是：
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("li.menu-item-has-children ul").hide();
});
jQuery(document).on("click", "li.menu-item-has-children a", function() {
jQuery(this).next("ul").toggle();
});
jQuery(document).on('click','li.menu-item a', function(){
var href = jQuery(this).attr('href');
if (href === undefined || jQuery.trim(href) === '') {
//event.preventDefault();
console.log('No href value');
}else{
jQuery('section.side_menu').removeClass('open-menu');
jQuery('#side_menu_button_links').removeClass('open').addClass('close');
}
});
// If menu Open
jQuery(document).on('click','a.side_menu_button_links.large.open', function(e){
jQuery(this).removeClass('open').addClass('close');
jQuery('section.side_menu').removeClass('open-menu');
});
// If Menu Close
jQuery(document).on('click','a.side_menu_button_links.large.close', function(e){
jQuery(this).removeClass('close').addClass('open');
jQuery('section.side_menu').addClass('open-menu');
});
jQuery(document).on('click','a.close_my_menu', function(){
jQuery('section.side_menu').removeClass('open-menu');
jQuery('#side_menu_button_links').removeClass('open').addClass('close');
});
</script>
我不知道 if / else 代码有什么问题。在 ajax 请求 if+else 一次工作之后。我的意思是第一个菜单打开然后关闭。我跟踪这个使用console.log();
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句