Question

代码在元素中添加了一个类，允许用户在移动设备上打开汉堡包，但是它具有一个ID，我们使用三个元素，并且代码针对一个特定的ID编写。

我们需要该代码才能用于班级，以便用户可以打开汉堡包中的所有三个按钮

我尝试添加更多ID，仅此而已。我看了几个小时的教程，但仍然不明白。

https://cdn.shopify.com/s/files/1/0047/9274/6077/t/2/assets/app.min.js?603193

以下是清除代码的链接： https://html-cleaner.com/js/

d.addEventListener("click", function() {
    var e, t = d;
    (e = t).getAttribute("id") !== n.id.shop || .hasClass(e, n.cls.showing) ? .removeClass(e, n.cls.showing) : _.addClass(e, n.cls.showing)
}, !1)


id: {
    account: "nav__mobile-account",
    menu: "nav__mobile-menu",
    nav: "nav",
    nav_mobile: "nav__mobile",
    nav_mobile_overlay: "nav-mobile-overlay",
    nav_toggle_icon: "nav-toggle-icon",
    shop: "nav__mobile-shop",
    searchInput: "searchInput",
    searchBtn: "searchBtn",
    headerPanel: "headerPanel",
    searchForm: "searchForm"
}
}, t = document.getElementById(n.id.account), e = document.body, i = document.getElementById(n.id.menu), o = document.getElementById(n.id.nav), s = document.getElementById(n.id.nav_mobile), r = document.getElementById(n.id.nav_mobile_overlay), a = document.getElementById(n.id.nav_toggle_icon), c = document.getElementById(n.id.searchInput), l = document.getElementById(n.id.searchBtn), d = document.getElementById(n.id.shop), u = document.getElementById(n.id.headerPanel), h = document.getElementById(n.id.searchForm), f = window.innerWidth <= 767, p = f ? "mobile" : "desktop";

function m(e) {
    e.getAttribute("id") === n.id.menu ? (_.addClass(s.parentNode, n.cls.menu_is_active), _.addClass(i, n.cls.active), _.removeClass(s.parentNode, n.cls.account_is_active), _.removeClass(t, n.cls.active)) : (_.addClass(s.parentNode, n.cls.account_is_active), _.addClass(t, n.cls.active), _.removeClass(s.parentNode, n.cls.menu_is_active), _.removeClass(i, n.cls.active))
}

function g() {
    _.removeClass(o, n.cls.active), _.removeClass(r, n.cls.active)
}

function v() {
    _.mq({
        view: "desktop",
        callback: function() {
            "desktop" !== p && (f = !(p = "desktop"), _.hasClass(o, n.cls.active) && g(), _.hasClass(d, n.cls.showing) && _.removeClass(d, n.cls.showing))
        }
    }), _.mq({
        view: "mobile",
        callback: function() {
            "mobile" !== p && (p = "mobile", f = !0, g())
        }
    })
}
return window.scrollY, window.addEventListener("scroll", function() {
    95 <= window.scrollY ? e.classList.add(n.cls.header_panel_hidden) : e.classList.remove(n.cls.header_panel_hidden)
}), _.windowResize(v), a.addEventListener("click", function() {
    _.addClass(o, n.cls.active), _.addClass(r, n.cls.active)
}, !1), r.addEventListener("click", function() {
    g()
}, !1), t.addEventListener("click", function() {
    var e = t;
    m(e)
}, !1), i.addEventListener("click", function() {
    var e = i;
    m(e)
}, !1), d.addEventListener("click", function() {
    var e, t = d;
    (e = t).getAttribute("id") !== n.id.shop || _.hasClass(e, n.cls.showing) ? _.removeClass(e, n.cls.showing) : _.addClass(e, n.cls.showing)
}, !1)

我们正在使用的一些html代码

<ul class="nav__left">

              <li id="nav__mobile-shop" class="nav__item nav__item--has-dropdown">
                <span style="line-height:74px;height:74px;font-size:18px;font-weight:500;" class="nav__btn nav__item">
                  Read
                </span>
                <ul class="nav__item-dropdown nav__item-dropdown-shop">
                   <li class="nav__item nav__item">
                    <a href="events.php" class="nav__btn nav__btn--in-dropdown">Events</a>
                  </li> 
                  <li class="nav__item nav__item">
                    <a href="newsletters.php" class="nav__btn nav__btn--in-dropdown">Our News</a>
                  </li>
                  <li class="nav__item nav__item">
                    <a href="articles.php" class="nav__btn nav__btn--in-dropdown">Press</a>
                  </li>

                </ul>
              </li>

              <li id="nav__mobile-shop" class="nav__item nav__item--has-dropdown">
                <span style="line-height:74px;height:74px;font-size:18px;font-weight:500;" class="nav__btn nav__item">
                  Science
                </span>
                <ul class="nav__item-dropdown nav__item-dropdown-shop">
                   <li class="nav__item nav__item">
                    <a href="product_overview.php" class="nav__btn nav__btn--in-dropdown">Overview of Product</a>
                  </li> 
                  <li class="nav__item nav__item">
                    <a href="quality_control.php" class="nav__btn nav__btn--in-dropdown">Quality Control</a>
                  </li>
                  <li class="nav__item nav__item">
                    <a href="research_dev.php" class="nav__btn nav__btn--in-dropdown">Research and Development</a>
                  </li>

                </ul>
              </li>

              <li id="nav__mobile-shop" class="nav__item nav__item--has-dropdown">
                <span style="line-height:74px;height:74px;font-size:18px;font-weight:500;" class="nav__btn nav__item">
                  FAQ
                </span>
                <ul class="nav__item-dropdown nav__item-dropdown-shop">
                   <li class="nav__item nav__item">
                    <a href="about.php" class="nav__btn nav__btn--in-dropdown">About Us</a>
                  </li> 
                  <li class="nav__item nav__item">
                    <a href="common_categories.php" class="nav__btn nav__btn--in-dropdown">Common Questions</a>
                  </li>

                </ul>
              </li>

        </ul>

移动版下拉菜单导航栏不会删除

0 个答案: