Question

Hello I am trying to add an addclass function if else statement so the toggled submenu stays open on the specified pages.

Current nav opens and closes without the if statement but once added the if( is_page(array())) statement the whole thing stops working.

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;
}

Everything after the else statement works fine, the menu just closes when you are on the submenu item urls and that is what I am aiming to fix.

Any help is greatly appreciated thank you in advance!

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在其他地方定义（js文件中的IE），那么此解决方案将无法正常工作。对于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（pages，function（idx，item）来验证in_page = true

if（in_page）是这样的子项加载完全打开，因为它与（文档）上的slidetoggle相关联.ready

希望这有助于某人。

SubMenu items not displayed on if( is_page(array())) statement with addclass function

2 个答案: