Question

因此，我正在制作一个带有关闭按钮的侧边栏菜单。但是我正在尝试实现一些代码，这些代码允许您在单击菜单项时自动关闭侧边栏菜单。

这是侧边栏菜单代码的一小段，我尝试使用closeNav（）函数在菜单项上实现onclick

这是我要实现的javascript。我在这里做错了什么？是否有更好的方法可以使用或不使用javascript？

function closeNav() {
  document.getElementById("sidebar").style.width = "0%";
}

<div class="wrapper">
  <!-- Sidebar Holder -->
  <nav id="sidebar">
    <div id="dismiss">
      <i class="glyphicon glyphicon-arrow-left"></i>
    </div>

    <div class="sidebar-header">
      <h3>Tutorial OnPay</h3>
    </div>

    <ul class="list-unstyled components">
      <p>Topik 1 : Pendaftaran + Pengaktifan + Log Masuk</p>
      <li>
        <a href="#daftar" data-toggle="collapse" aria-expanded="false">1.1 Pendaftaran OnPay</a>
        <ul class="collapse list-unstyled" id="daftar">
          <li><a href="#section1" onclick="closeNav()">1.1.1 Layari Laman Web</a></li>
          <li><a href="#section2">1.1.2 Pilih Subdomain</a></li>
          <li><a href="#section3">1.1.3 Pilih Emel</a></li>
          <li><a href="#section4">1.1.4 Pilih ID dan Kata Laluan</a></li>
          <li><a href="#section5">1.1.5 Isi Maklumat Profil Diri</a></li>
          <li><a href="#section6">1.1.6 Pengesahan Spam/Robot (reCAPTCHA)</a></li>
          <li><a href="#section7">1.1.7 Klik Butang Daftar</a></li>
        </ul>
      </li>
      <li>
        <a href="#aktif" data-toggle="collapse" aria-expanded="false">1.2 Pengaktifan Akaun</a>
        <ul class="collapse list-unstyled" id="aktif">
          <li><a href="#section8">1.2.1 Semak Emel "Pendaftaran Akaun OnPay"</a></li>
          <li><a href="#section9">1.2.2 Tekan Hyperlink Pengaktifan Akaun</a></li>
          <li><a href="#section10">1.2.3 Pengaktifan Akaun Berjaya</a></li>
        </ul>
      </li>
      <li>
        <a href="#logmasuk" data-toggle="collapse" aria-expanded="false">1.3 Log Masuk Akaun OnPay</a>
        <ul class="collapse list-unstyled" id="logmasuk">
          <li><a href="#section11">1.3.1 Layari Halaman Log Masuk Akaun Anda</a></li>
          <li><a href="#section12">1.3.2 Masukkan ID Admin dan Kata Laluan</a></li>
          <li><a href="#section13">1.3.3 Log Masuk OnPay Berjaya</a></li>
        </ul>
      </li>
    </ul>
  </nav>

Answer 1

您是否尝试过 document.getElementById（“ sidebar”）。style.display =“ none”;

Answer 2

我建议将您的代码包装到IIFE

中

(function () {
    // get sidebar element
    var sidebar = document.getElementById('sidebar');

    function closeNav() {
        sidebar.style.width = "0%";
    }

    // get all `a` tags inside sidebar
    var aTags = sidebar.getElementsByTagName('a');

    // for each tag
    aTags.forEach(function (a) {
        // add click event listener to execute closeNav on `click`
        a.addEventListener('click', closeNav);
    });
})();

Answer 3

Alif

我想出了这个解决方案：

function closeNav() {
    $('#sidebar .collapse li a').on('click', function() {
        $('#sidebar [data-toggle="collapse"]').collapse('hide')
        $('#sidebar').hide()
    })
}

它会侦听列表项链接的点击，然后折叠其中的列表并隐藏侧边栏。

注意：当您使用引导程序时，我猜测您可以使用JQuery，因为此示例需要jQuery。

Answer 4

我认为问题出在style.width。尝试使用CSS属性“可见性”

 <script>

function closeNav() {
document.getElementById("sidebar").style.visibility= "hidden";
}
</script>

我认为即使那样，它也不会释放该元素占用的空间。另一种方法是z-index。

但是最简单，最干净的方法是使用remove（）函数。 https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

<script>

    function closeNav() {
    document.getElementById("sidebar").remove();
    }
    </script>

然后在需要时使用appendChild方法动态创建它。

单击菜单项bootsrap 3时自动关闭侧边栏导航菜单

4 个答案: