引导侧边栏菜单关闭，不能在移动设备上工作

我有一个侧边栏菜单，当你点击汉堡包菜单时，它会打开一个深色覆盖在主体上。问题是，在移动设备上，当点击菜单外时，可见性不会改变。它适用于台式机和更新的iPhone 10设备，但在iPhone 8和lt上测试时，点击手机菜单时保持活跃状态。下面是代码;我肯定我忽略了一些CSS属性。

下面是主题中使用的侧边栏片段的摘录。液体文件

<body id="{{ page_title | handle }} menu" class="template-{{ template.name | handle }}">
<div id="whileyApp" class="whiley-theme"></div>
<div id="aside_main" class="sidebar-menu">
{%- include 'sidebar-menu' -%}
</div>
</body>

这是汉堡包菜单的按钮

<div class="toggle">
<a href="#" class="burger js-menu-toggle-home" data-toggle="collapse" data-target="#main-navbar">
<span></span>
</a>
</div>

下面是侧边栏菜单片段中的HTML标记

<div class="side-inner">
<div class="profile">
<a href="{{shop.url}}" title="{{ shop.name | escape }}">
{%- assign mobile_logo = "logo.png" | asset_img_url: 'master'  -%}
{%- if settings.main_logo != blank -%}
{%- assign mobile_logo = settings.main_logo | img_url: 'master' -%}
{%- endif -%}
<img src="{{ mobile_logo }}"{{' '}}{%-if settings.mobile_logo_max_width != blank -%}style="max-width:{{settings.mobile_logo_max_width}}px;"{%-endif-%}{{' '}}title="{{ shop.name | escape }}" alt="{{ shop.name | escape }}" class="img-fluid"/>
</a>
</div>
{% for link in linklists[settings.mobile_linklist].links %}
{% if link.links != blank %}
<div class="nav-menu">
<ul id="accordion">
<li class="accordion">
<span><a aria-controls="collapseOne"
aria-expanded="false"
class="collapsible"
data-target="#collapse{{forloop.index}}"
data-toggle="collapse"
href="#">{{ link.title }}
</a></span>
<div aria-labelledby="headingOne" class="collapse" id="collapse{{forloop.index}}">
<ul>
{% for childlink in link.links %}
<li>
<a href="{{childlink.url}}">{{childlink.title}}</a>
</li>
{% endfor %}
</ul>
</div>
</li>
</ul>
</div>
{% endif %}
{% endfor %}
<div class="nav-menu">
<ul id="static-pages">
<li class="accordion"><a href="/account">
{%- if customer -%}
Hi, {{ customer.first_name }}
{%- else -%}{{ 'customer.account.title' | t }}</a></li>
{% endif %}
</ul>
</div>
</div>

这是CSS -适用于桌面网站，而不是移动Safari或chrome IOS <8

#aside_main {
width: 300px;
height:100vh;
left: 0;
z-index: 1001;
position: fixed;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
background-color: #fff;
-webkit-transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
transition: 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
-o-transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1);
transition: 1s transform cubic-bezier(0.23, 1, 0.32, 1), 1s -webkit-transform cubic-bezier(0.23, 1, 0.32, 1);
}
.show-sidebar-main #aside_main {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
#aside_main .toggle {
padding-left: 30px;
padding-top: 30px;
position: absolute;
right: 0;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.show-sidebar-main #aside_main .toggle .burger:before, .show-sidebar-main #aside_main .toggle .burger span, .show-sidebar-main #aside_main .toggle .burger:after {
background: #000;
}
#aside_main .side-inner {
padding: 10px 0;
height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#aside_main .side-inner .profile {
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 30px;
padding-bottom: 10px;
border-bottom: 1px solid #efefef;
}
#aside_main .side-inner .profile img {
width: 180px;
margin: 0 auto;
border-radius: 50%;
}
#aside_main .side-inner .profile .name {
font-size: 18px;
margin-bottom: 0;
}
#aside_main .side-inner .profile .country {
font-size: 14px;
color: #cfcfcf;
}
#aside_main .side-inner .counter {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #efefef;
text-align: center;
}
#aside_main .side-inner .counter div .number {
display: block;
font-size: 20px;
color: #000;
}
#aside_main .side-inner .counter div .number-label {
color: #cfcfcf;
}
#aside_main .side-inner .nav-menu ul, #aside_main .side-inner .nav-menu ul li {
padding: 0;
margin: 0px;
list-style: none;
}
#aside_main .side-inner .nav-menu ul li a {
display: block;
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
color: {{settings.body_font_text}};
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1.5px;
font-size: 12px;
position: relative;
-webkit-transition: .3s padding-left ease;
-o-transition: .3s padding-left ease;
transition: .3s padding-left ease;
}
#aside_main .side-inner .nav-menu ul li a:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0px;
background-color: #000;
opacity: 0;
visibility: hidden;
-webkit-transition: .3s opacity ease, .3s visibility ease, .3s width ease;
-o-transition: .3s opacity ease, .3s visibility ease, .3s width ease;
transition: .3s opacity ease, .3s visibility ease, .3s width ease;
}
#aside_main .side-inner .nav-menu ul li a:active, #aside_main .side-inner .nav-menu ul li a:focus, #aside_main .side-inner .nav-menu ul li a:hover {
outline: none;
}
#aside_main .side-inner .nav-menu ul li a:hover {
background: #fcfcfc;
color: #000;
}
#aside_main .side-inner .nav-menu ul li a:hover:before {
width: 4px;
opacity: 1;
visibility: visible;
}
#aside_main .side-inner .nav-menu ul li.active a {
background: #fcfcfc;
color: #000;
}
#aside_main .side-inner .nav-menu ul li.active a:before {
opacity: 1;
visibility: visible;
width: 4px;
}
#aside_main .side-inner .nav-menu ul li .collapsible {
position: relative;
}
#aside_main .side-inner .nav-menu ul li .collapsible:after {
font-size: 18px;
position: absolute;
top: 15px;
right: 30px;
width: 10px;
height: 10px;
font-family: 'Font Awesome 5 Free';
content: " ";
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='Icon Icon--select-arrow' role='presentation' viewBox='0 0 19 12'%3E%3Cpolyline fill='none' stroke='currentColor' points='17 2 9.5 10 2 2' fill-rule='evenodd' stroke-width='2' stroke-linecap='square'%3E%3C/polyline%3E%3C/svg%3E") no-repeat;
color: #5c5c5c;
font-weight: 700;
line-height: 20px;
-webkit-transition: .3s transform ease;
-o-transition: .3s transform ease;
transition: .3s transform ease;
}
#aside_main .side-inner .nav-menu ul li .collapsible[aria-expanded="true"] {
background: #fcfcfc;
color: #000;
}
#aside_main .side-inner .nav-menu ul li .collapsible[aria-expanded="true"]:before {
opacity: 1;
visibility: visible;
width: 4px;
}
#aside_main .side-inner .nav-menu ul li .collapsible[aria-expanded="true"]:after {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
top: 15px;
}
body.show-sidebar-main:before {
opacity: 1;
visibility: visible;
background-color:rgba(0,0,0,0.7);
// z-index:1001;
}

下面是控制类的JS代码

//Mobile menu
$(function() {
'use strict';
$('.js-menu-toggle-home').click(function(e) {
var $this = $(this);
if ( $('body').hasClass('show-sidebar-main') ) {
$('body').removeClass('show-sidebar-main');
$this.removeClass('active');
} else {
$('body').addClass('show-sidebar-main');
$this.addClass('active');
}
e.preventDefault();
});
// click outisde offcanvas
$(document).mouseup(function(e) {
var container = $(".sidebar-menu");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ( $('body').hasClass('show-sidebar-main') ) {
$('body').removeClass('show-sidebar-main');
$('body').find('.js-menu-toggle-home').removeClass('active');
}
}
});
});

实际上，我只是将$(document).mouseup(function(e){}改为$(document).bind("mouseup touchend"， function(e){}，似乎可以工作。

相关内容

最新更新

热门标签：