堆栈内存溢出
  繁体   English   中英

Bootstrap侧边栏菜单关闭在移动设备上不起作用

[英]Bootstrap sidebar menu close not working on mobile

 原文  2021-01-21 22:39:34  3   1    javascript/ html/ css/ shopify

问题描述

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

这是在 theme.liquid 文件中使用的侧边栏片段的摘录

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

});

1 个解决方案

解决方案1
 0  2021-01-21 23:20:00

实际上，我只是将 $(document).mouseup(function(e) { } 更改为 $(document).bind("mouseup touchend", function(e) {} 并且似乎有效。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何关闭侧边栏菜单？ （引导程序） 单击导航菜单关闭带有Bootstrap的移动菜单 Bootstrap侧边栏菜单的Javascript代码不起作用 在移动版本中单击主体时，关闭侧边栏菜单 在移动设备上单击新按钮（单击菜单链接时）时关闭边栏？ bootstrap - 通过代码关闭&#39;mobile（hamburger）&#39;菜单 Bootstrap 移动菜单图标更改为 x 关闭 Bootstrap 侧边栏菜单和侧边栏导航 sidr菜单关闭在chrome mobile中不起作用 在单击主体关闭侧边栏菜单上
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM