wp-bootstrap-nav walker collapse не работает на ipad

Question

Bootstrap navbar развал не работает.Проблема в том, что оно показывает сворачивающееся меню, но при щелчке оно не сворачивается.Я предоставил свой полный код, чтобы он мог помочь вам предложить или помочь разобраться в проблеме

<header class="head-image">
        <nav id="nav-top" class="navbar hidden-xs hidden-sm" style="margin-bottom: 0px;"> 
            <div class="container text-center">
                <div class="col-md-4 col-md-offset-8">
                    <div class="search-box">
                        <?php echo do_shortcode('[smart_search id="1"]'); ?>
                    </div>
              </div>
            </div>
        </nav>
        <section id="main-header">
            <div class="container">
                <div class="pull-left">
                    <a href="<?php echo esc_url(home_url('/')); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home">
                        <img src="<?php header_image(); ?>" width="213" height="117" alt="">
                    </a>
                </div>

                <div class="pull-right hidden-xs hidden-sm">
                    <div class="row text-right">
                        <div class="col-xs-12">
                            <span class="text-white">Order hotline</span>
                        </div>
                        <div class="col-xs-12">
                            <span class="nav-phone">
                                <i class="fa fa-phone" aria-hidden="true"></i>
                                <a class="text-white nav-phone" href="tel:+"></a>
                            </span>
                        </div>
                    </div>
                    <div class="row n-m hidden-xs hidden-sm">
                        <div class="col-sm-6 col-xs-12 border-brown relative">
                            <a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" class="cover-href"></a>
                            <div class="col-xs-3">
                                <i class="fa fa-user" aria-hidden="true"></i>
                            </div>
                            <div class="col-xs-9">

                                <div class="row">
                                    <a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" class="text-white">Login/Register</a> </div>

                                <div class="row ">
                                    <span class="text-white">
                                        My Account                               
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-5 col-xs-12 border-brown relative">
                            <a href="<?php echo wc_get_cart_url(); ?>" class="cover-href"></a>

                            <div class="col-xs-3">
                                <a href="<?php echo wc_get_cart_url(); ?>">
                                    <i class="fa fa-shopping-bag" aria-hidden="true"></i>
                                </a>
                            </div>
                            <div class="col-xs-9">
                                <div class="row">
                                    <a href="<?php echo wc_get_cart_url(); ?>" class="text-white">Shopping bag</a>
                                </div>
                                <div class="row">
                                    <span class="text-white">
                                        <?php echo WC()->cart->get_cart_contents_count(); ?> Items <span class="price">(<?php echo WC()->cart->get_cart_total(); ?>)
                                        </span> 
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </section>
        <nav class="navbar" id="main-menu">
            <div class="container">
                <div class="navbar-header hidden-md hidden-lg">
                    <div class="col-xs-6">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>

                        </button>
                        <span class="text-white hidden-lg hidden-md" data-toggle="collapse" data-target="#main-menu-collapse">Menu</span>
                    </div>

                    <div class="col-xs-6 pull-right border-brown text-center hidden-lg hidden-md relative">
                        <a href="<?php echo wc_get_cart_url(); ?>" class="cover-href"></a>
                        <div class="row">
                            <div class="col-xs-4">
                                <i class="fa fa-shopping-bag" aria-hidden="true"></i>
                            </div>
                            <div class="col-xs-8 text-white">
                                <span class="text-white">
                                    <?php echo WC()->cart->get_cart_contents_count(); ?> Items 
                                    <span class="text-white">
                                        (<?php echo WC()->cart->get_cart_total(); ?>)
                                    </span> 
                                </span>
                            </div>
                        </div>

                    </div>
                </div>

                <div id="main-menu-collapse" class="collapse navbar-collapse">

                    <?php
                    wp_nav_menu(array(
                        'theme_location' => 'primary',
                        'depth' => 2,
                        'container' => 'div',
                        'menu_class' => 'nav navbar-nav',
                        'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
                        'walker' => new WP_Bootstrap_Navwalker(),
                    ));
                    ?>

                    <div class="row border-top hidden-lg hidden-md">
                        <div class="col-xs-3">
                            <a href="contact_us" class="text-white">Contact</a>
                        </div>
                        <div class="col-xs-9">
                            <a href="tel:">
                                <i class="fa fa-phone" aria-hidden="true"></i>
                                <span class="text-white"></span>
                            </a>

                        </div>
                    </div>
                    <div class="row border-top hidden-lg hidden-md">
                        <div class="col-xs-3">
                            <a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" class="text-white">Login/ register</a>
                        </div>
                        <div class="col-xs-9">
                            <a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>">
                                <i class="fa fa-user" aria-hidden="true"></i>
                                <span class="text-white">My account</span>
                            </a>

                        </div>
                    </div>
                </div>
            </div>
        </nav>
        <nav class="navbar" id="menu-shortcut">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav col-lg-12 text-center">
                        <li class="col-lg-4 col-md-4 text-left"><a href="">text</a></li>
                        <li class="col-lg-4 col-md-4"><a href="">text</a></li>
                        <li class="col-lg-4 col-md-4 text-right"><a class="toggle-modal" href="javascript:void(0);">Sign up </a></li>

                    </ul>

                </div>
            </div>
        </nav>
    </header>

Я также использую Jquery, код приведен ниже, в моем коде нет конфликта jqueryработает отлично, только получая проблему, когда я просматриваю форму iPad

$('#main-menu .navbar-header .col-xs-6:first-child, #main-menu .navbar-header button').click(function()
{

    if($(this).children('button').attr('class') == "navbar-toggle collapsed")
    {
        $(this).parents('.container').children('#main-menu-collapse').addClass('in');
        $(this).parents('.container').children('#main-menu-collapse').slideDown('fast', function() {

        });
        $(this).children('button').html("");

        $(this).children('button').css({

            'min-width' : '44px',
            'min-height' : '34px'

        });
        $(this).children('button').attr('aria-expanded', 'true');
        $(this).children('button').removeClass('collapsed');

    }else
    {
        $(this).children('button').addClass('collapsed');   
        $(this).parents('.container').children('#main-menu-collapse').slideDown('fast', function() {

        });
        $(this).parents('.container').children('#main-menu-collapse').css('display', 'none');
        $(this).children('button').attr('aria-expanded', 'false');
        $(this).parents('.container').children('#main-menu-collapse').removeClass('in');
        $(this).children('button').css({
            "margin-top" : "11px",
            'background' : 'none'
        });
        $(this).children('button').html('<span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>');
    }
});

Answer 1

.click() не происходит в Safari, если только элемент, к которому он привязан, не является допустимым click получателем событий (целью) в собственной реализации Apple веб-стандарта (который отличается от текущего веб-стандарта).

Самый простой способ превратить любой элемент в «законный» целевой объект клика - добавить к нему

cursor: pointer;

.

Другие обходные пути включают использование различных событий, таких как touchstart, tap или input, в зависимости от случая.

---

Таким образом, в вашем случае исправление будетчтобы добавить это к вашему CSS:

#main-menu .navbar-header .col-xs-6:first-child, 
#main-menu .navbar-header button {
 cursor: pointer;
}

Или изменить оболочку на:

$('#main-menu .navbar-header .col-xs-6:first-child, #main-menu .navbar-header button')
  .on('click touchstart', function(){
    // your code here
  })

---

По моему мнению, вы должны удалить wordpress , wordpress-theming и wp-nav-walker из вопроса, поскольку они не имеют отношения к ошибке и, возможно, добавят safari , ios и/ или ipad к нему.