wp-bootstrap-nav walker崩溃在iPad上不起作用

Bootstrap导航栏崩溃不起作用。问题在于它显示了一个折叠菜单, 但是在单击时它没有被折叠。我提供了完整的代码, 因此它可以帮助你提出建议或帮助我解决问题

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

#1

除非绑定的元素是Apple自己的Web标准实现中的合法点击事件接收器(目标)(与当前Web标准不同), 否则.click()在Safari中不会发生。

使任何元素成为”合法”点击事件目标的最简单方法是添加

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。

来源：

https://www.srcmini02.com/66410.html