Question

当我打开幻灯片菜单时，我看到可见的汉堡包图标。我的问题是打开幻灯片菜单时如何使该汉堡包图标不可见。如您在上面看到的，我有2个ID。一个是侧边栏，另一个是侧滑。打开幻灯片菜单时，我必须在javascript或上面的附加代码中插入哪些代码，才能使汉堡包图标不可见。您能给我写所有的JavaScript代码来实现我的目标吗？

我的网址是：http://webdesignleren.com

所以您可以确切地理解我的意思。

function openSlideMenu() {
  document.getElementById('side-menu').style.width = '250px';
}

function closeSlideMenu() {
  document.getElementById('side-menu').style.width = '0';
}

<div id="side-menu" class="side-nav">
    <a href="#" onclick="openSlideMenu()">
        <div id="open-slide">
            <svg width="30" height="30" style="margin-left:-10px;">
                <path d="M0 ,5 30 ,5" stroke="#003145" stroke-width="5" />
                <path d="M0 ,14 30 ,14" stroke="#003145" stroke-width="5" />
                <path d="M0 ,23 30 ,23" stroke="#003145" stroke-width="5" />
            </svg>
        </div>
    </a>
    <a href="#" class="btn-close" onclick="closeSlideMenu()">X </a>
    <div class="menu-bar">Menu</div>
    <ul>
        <li> <a href="http://webdesignleren.com/">Home</a> </li>

        <li> <a href="http://webdesignleren.com/?page_id=7">Onderhoud</a> </li>

        <li> <a href="http://webdesignleren.com/?page_id=9">Banden</a> </li>

        <li> <a href="http://webdesignleren.com/?page_id=11">APK</a> </li>

        <li><a href="http://webdesignleren.com/?page_id=13">Contact</a> </li>
    </ul>
</div>

Answer 1

在菜单中添加“ 已禁用”类，然后在点击功能内添加“ 已禁用” addClass

示例

https://codepen.io/andsonlourenco/pen/XLgzjV

<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
  <label for="openSidebarMenu" class="sidebarIconToggle">
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
  </label>

我想要当我打开幻灯片菜单时汉堡包图标消失

1 个答案: