子菜单项未显示在带有 addclass 函数的 if( is_page(array())) 语句上

Question

您好，我正在尝试添加一个addclass函数if else语句，以便切换的子菜单在指定页面上保持打开状态。

当前 nav 在没有 if 语句的情况下打开和关闭，但一旦添加了 if( is_page(array(((( 语句，整个事情就会停止工作。

Jquery

jQuery(document).ready(function($){
    if( is_page( array( 'edit-account', 'edit-address', 'payment-method', 'orders' ) ) ){
         $$(document).on('load', function(){
            $(".group-opener").addClass("open");
         });
         $('.group-opener').click(function() {
            $(this).parent().siblings().find('ul').slideUp(300);
            $(this).next('ul').stop(true, false, true).slideToggle(300);
            return false;
        });
    }
    else {
        $("a.group-opener").on("click", function(){
            $(".group-opener").toggleClass("open");
        });
        $('.group-opener').click(function() {
            $(this).parent().siblings().find('ul').slideUp(300);
            $(this).next('ul').stop(true, false, true).slideToggle(300);
            return false;
        });
    }
});

.html

<nav>
        <ul>
            <li>
                <a href="/my-account/">Dashboard</a>
            </li>
            <li>
                <a href="/my-account/order-a-kit/">Order A Kit</a>
            </li>
            <li>
                <a href="/my-account/subscriptions/">My Subscriptions</a>
            </li>
            <li class="group-custom-group">
                <a class="group-opener" href="#">Account Details</a>
                <ul class="myaccount-submenu">
                    <li>
                        <a href="/my-account/edit-account/">Edit Account</a>
                    </li>
                    <li>
                        <a href="/my-account/edit-address/">Edit Addresses</a>
                    </li>
                    <li>
                        <a href="/my-account/payment-methods/">Payment methods</a>
                    </li>
                    <li>
                        <a href="/my-account/orders/">Order History</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="/my-account/customer-logout/?_wpnonce=b7f9a60e3d">Logout</a>
            </li>
        </ul>
    </nav>

.css

a.group-opener:after {
    content: 'f078';
    font-family: 'fontAwesome';
    padding-left: 10px;
}
a.group-opener.open:after {
    content: 'f077';
    font-family: 'fontAwesome';
    padding-left: 10px;
}
.myaccount-submenu {
    display: none;
} 
.myaccount-submenu.open {
    display: block;
}
.stay-open {
    display: block !important;
}

else 语句之后的所有内容都可以正常工作，当您在子菜单项 url 上时，菜单就会关闭，这就是我打算解决的问题。

任何帮助都非常感谢，提前感谢您！

Answer 1

你正在混合PHP和JS代码。如果你在PHP脚本中使用jQuery代码(猜测Wordpress(，你可以为所有PHP代码添加带有PHP标签的if - else条件：

jQuery(document).ready(function($){
<?php if( is_page( array( 'edit-account', 'edit-address', 'payment-method', 'orders' ) ) ){ ?>
     $(window).on('load', function(){
        $(".group-opener").addClass("open");
     });
     $('.group-opener').click(function() {
        $(this).parent().siblings().find('ul').slideUp(300);
        $(this).next('ul').stop(true, false, true).slideToggle(300);
        return false;
    });
  }
  <?php else { ?>
      $("a.group-opener").on("click", function(){
        $(".group-opener").toggleClass("open");
      });
      $('.group-opener').click(function() {
          $(this).parent().siblings().find('ul').slideUp(300);
          $(this).next('ul').stop(true, false, true).slideToggle(300);
          return false;
      });
   <?php  } ?>
});

请注意，您只能在 PHP 脚本中添加 PHP 语法，因此如果 jQuery 是在其他地方定义的(IE 在 js 文件中(，则此解决方案将不起作用。对于Wordpress，我建议您将JS放在单独的文件中，并通过functions.php添加它。下面是一个示例代码，然后将始终打开的菜单放在special_menu.js中，将默认菜单代码放在normal_menu.js中：

function page_menu_script() {
    if( is_page( array( 'edit-account', 'edit-address', 'payment-method', 'orders' ) ) ){
        wp_enqueue_script( 'script-name', 'path_to_js/special_menu.js', array(), '1.0.0', true );
    }
    else {
         wp_enqueue_script( 'script-name', 'path_to_js/normal_menu.js', array(), '1.0.0', true );
    } 
}
add_action( 'wp_enqueue_scripts', 'page_menu_script' );

Answer 2

在一些帮助下，我能够用jQuery解决这个问题

这是代码：

jQuery(document).ready(function($) {
        $(document).on('click', '.group-opener', function() {
        $(this).toggleClass('open');
        $(this).parent().siblings().find('ul').slideUp(300);
        $(this).next('ul').stop(true, false, true).slideToggle(300);
        return false;
    });
    var pages = ['edit-account', 'edit-address', 'payment-method', 'orders'],
        url = window.location.href,
        in_page = false;
    $.each(pages, function(idx, item){
        if(url.indexOf('my-account/'+item)>-1){
            in_page = true;
        }
    });
    if(in_page){
        $('.group-opener').addClass('open').next('ul').css('display','block').parent().siblings().find('ul').css('display','none');
    }
});

添加了一个页面变量和 $.each(页面， 函数(IDX， 项目( 来验证in_page = true

if(in_page( 是这样子项目加载完全打开，就像在 (document(.ready 上滑动切换一样

希望这对某人有所帮助。