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

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="http://www.srcmini.com/< ?php echo esc_url(home_url('/')); ?> " title="< ?php echo esc_attr(get_bloginfo('name', 'display')); ?> " rel="home"> < img src="http://www.srcmini.com/< ?php header_image(); ?>" width="213" height="117" > < /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="http://www.srcmini.com/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="http://www.srcmini.com/< ?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="http://www.srcmini.com/< ?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="http://www.srcmini.com/< ?php echo wc_get_cart_url(); ?>" class="cover-href"> < /a> < div class="col-xs-3"> < a href="http://www.srcmini.com/< ?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="http://www.srcmini.com/< ?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="http://www.srcmini.com/< ?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="http://www.srcmini.com/contact_us" class="text-white"> Contact< /a> < /div> < div class="col-xs-9"> < a href="http://www.srcmini.com/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="http://www.srcmini.com/< ?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?> " class="text-white"> Login/ register< /a> < /div> < div class="col-xs-9"> < a href="http://www.srcmini.com/< ?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中不会发生。
使任何元素成为” 合法” 点击事件目标的最简单方法是添加