wp-bootstrap-nav walker 崩溃在 ipad 上不起作用
Posted
技术标签:
【中文标题】wp-bootstrap-nav walker 崩溃在 ipad 上不起作用【英文标题】：wp-bootstrap-nav walker collapse is not working on ipad 【发布时间】：2018-10-06 12:10:51 【问题描述】：引导导航栏折叠不起作用。问题是它显示了一个折叠菜单，但在单击时，它没有折叠。 我提供了我的完整代码，以便它可以帮助您提出建议或帮助我解决问题
<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(); ?>" >
</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>');
);
【问题讨论】：
与walker无关。我假设您正在 Safari 中进行测试？ 【参考方案1】：.click() 不会在 Safari 中发生，除非它绑定的元素是 Apple 自己的网络标准实现（不同于当前的网络标准）中的合法 click 事件接收器（目标）。
让任何元素成为“合法”点击事件目标的最简单方法是添加
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。
【讨论】：
以上是关于wp-bootstrap-nav walker 崩溃在 ipad 上不起作用的主要内容，如果未能解决你的问题，请参考以下文章