我创建了一个折叠的侧边栏，它使用动画汉堡包菜单图标打开。但是，我无法使用JavaScript关闭它。我的目标是当我点击动画图标时打开和关闭我的侧边栏。如果有任何建议，将不胜感激！希望下面的代码足以重新创建该问题。

HTML:

<h1>Sidebar Navigation</h1>

    <div id="mySidebar" class="sidebar">
        <a><i class="fa fa-home"></i> &nbsp;Home</a>
        <a><i class="fa fa-file-text"></i> &nbsp;Menu</a>
        <a><i class="fa fa-user-circle"></i> &nbsp;About</a>
        <a><i class="fa fa-group"></i> &nbsp;Careers</a>
        <a><i class="fa fa-map-marker"></i> &nbsp;Find a Store</a>
    </div>

    <div id="content">
        <div class="openBtn" onclick="myFunction(this)"> 
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </div>
        <p>Content pushed to the right when hamburger icon is clicked on which opens the sidebar.</p>
    </div>

CSS:

<h1>Sidebar Navigation</h1>

    <div id="mySidebar" class="sidebar">
        <a><i class="fa fa-home"></i> &nbsp;Home</a>
        <a><i class="fa fa-file-text"></i> &nbsp;Menu</a>
        <a><i class="fa fa-user-circle"></i> &nbsp;About</a>
        <a><i class="fa fa-group"></i> &nbsp;Careers</a>
        <a><i class="fa fa-map-marker"></i> &nbsp;Find a Store</a>
    </div>

    <div id="content">
        <div class="openBtn" onclick="myFunction(this)"> 
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </div>
        <p>Content pushed to the right when hamburger icon is clicked on which opens the sidebar.</p>
    </div>

JavaScript:

<h1>Sidebar Navigation</h1>

    <div id="mySidebar" class="sidebar">
        <a><i class="fa fa-home"></i> &nbsp;Home</a>
        <a><i class="fa fa-file-text"></i> &nbsp;Menu</a>
        <a><i class="fa fa-user-circle"></i> &nbsp;About</a>
        <a><i class="fa fa-group"></i> &nbsp;Careers</a>
        <a><i class="fa fa-map-marker"></i> &nbsp;Find a Store</a>
    </div>

    <div id="content">
        <div class="openBtn" onclick="myFunction(this)"> 
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </div>
        <p>Content pushed to the right when hamburger icon is clicked on which opens the sidebar.</p>
    </div>

顺晟科技：

调整您的myFunction函数的内部逻辑。在使用vanilla.js触发toggle事件之前，首先判断这次是否需要调整元素宽度。

您可以单击下面的Run code snippet或Expand snippet按钮，以查看该函数是否满足您的问题需求..