Автоматическое закрытие меню навигации боковой панели при нажатии на пункт меню bootsrap 3

Question

Итак, я создаю боковое меню с кнопкой закрытия.Но я пытаюсь реализовать некоторые коды, позволяющие автоматически закрывать меню боковой панели при нажатии на элемент меню.

Это фрагмент кода меню боковой панели, и я пытаюсь реализовать щелчок на кнопкепункт меню с функцией closeNav ()

Вот 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

Я думаю, что проблема с style.width.Попробуйте использовать свойство css 'visibility'

 <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.

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

Алиф

Я придумал это решение:

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

Он прослушивает щелчки по ссылкам на элементы списка, а затем сворачивает списки внутри него и скрывает боковую панель.

Примечание. Поскольку вы используете загрузчик, я предполагаю, что вы можете использовать JQuery, так как в этом примере требуется jQuery.

Answer 4

вы пробовали document.getElementById ("sidebar"). Style.display = "none";