我的网站基于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>
答案 0 :(得分：0)
我使用不同的点击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请求后，如果+ else一次工作。我的意思是第一个菜单是开放的＆amp;然后关闭我使用console.log();