jeudi 22 mars 2018

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

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 I 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!

Aucun commentaire:

Enregistrer un commentaire