Как предотвратить скрытие/сбой навигатора при нажатии на определенный элемент меню, у которого есть раскрывающийся список?

Я пытаюсь предотвратить сбой на панели управления при нажатии на раздел About Us или Projects в следующем коде. Я пробовал event.stopPropagation() на этих двух кнопках, но когда до тех пор, пока код jQuery не выполнится, navbar уже рушится и скрывается.

<li class="page-scroll">
   <a href="#home">Home</a>
</li>
<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us<span class="caret"></span></a>
   <ul class="dropdown-menu" role="menu">
      <li><a href="aboutus.html">Vision</a></li>
      <li><a href="team.html">Founding Team</a></li>
      <!--<li><a href="donors.html">Members</a></li>-->
   </ul>
</li>
<li class="page-scroll">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Projects<span class="caret"></span></a>
   <ul class="dropdown-menu" role="menu">
      <li><a href="sample-campaign - vidya.html">Vidya Vistar</a></li>
      <li><a href="sample-campaign - safai.html">Safai Abhyaan</a></li>
      <li><a href="sample-campaign - clothes.html">Clothes Donation</a></li>
      <li><a href="sample-campaign - food.html">Food Donation</a></li>
      <li><a href="sample-campaign - onetime.html">Ad Hoc</a></li>
   </ul>
</li>
<li class="page-scroll">
   <a href="#events">Events</a>
</li>
<li class="page-scroll">
   <a href="#gallery">Gallery</a>
</li>
<li class="page-scroll">
   <a href="#join">Get Involved</a>
</li>

Как предотвратить это скрытие навигационной панели (при размере экрана менее 992px) при нажатии кнопок Projects или About Us?

ОТВЕТЫ

Ответ 1

Увы, через 4 дня после прохождения кода я нашел функцию, которая вызывалась во время события щелчка всех кнопок, включая заголовки подразделов (About Us и Projects). Это происходит, когда вы пытаетесь продолжить проект, который был запущен кем-то другим. Вот код:

$('.navbar li').click(function() {
    $('.navbar-toggle:visible').click();
});

Я изменил его на:

// Closes the Responsive Menu on Menu Item Click
$('.toggle-responsive').click(function() {
    $('.navbar-toggle:visible').click();
});

И выделили классы, в которых он должен быть вызван:

<li class="page-scroll toggle-responsive">
   <a href="#home">Home</a>
</li>
<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us<span class="caret"></span></a>
   <ul class="dropdown-menu" role="menu">
      <li class="toggle-responsive"><a href="aboutus.html">Vision</a></li>
      <li class="toggle-responsive"><a href="team.html">Founding Team</a></li>
      <!--<li><a href="donors.html">Members</a></li>-->
   </ul>
</li>
<li class="page-scroll">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Projects<span class="caret"></span></a>
   <ul class="dropdown-menu" role="menu">
      <li class="toggle-responsive"><a href="sample-campaign - vidya.html">Vidya Vistar</a></li>
      <li class="toggle-responsive"><a href="sample-campaign - safai.html">Safai Abhyaan</a></li>
      <li class="toggle-responsive"><a href="sample-campaign - clothes.html">Clothes Donation</a></li>
      <li class="toggle-responsive"><a href="sample-campaign - food.html">Food Donation</a></li>
      <li class="toggle-responsive"><a href="sample-campaign - onetime.html">Ad Hoc</a></li>
   </ul>
</li>
<li class="page-scroll toggle-responsive">
   <a href="#events">Events</a>
</li>
<li class="page-scroll toggle-responsive">
   <a href="#gallery">Gallery</a>
</li>
<li class="page-scroll toggle-responsive">
   <a href="#join">Get Involved</a>
</li>

Ответ 2

Здесь вы можете посмотреть. Немного сложное решение. Сначала я попробовал bootstarp toogle event "hide.bs.popover" (Если вы хотите, вы можете проверить http://getbootstrap.com/javascript/#collapse), я не могу сделать так: (

Я использую только jquery. Теперь это работает. Решение очень просто, когда вы нажимаете "a" раскрывающееся окно начальной загрузки, затем добавляете класс "open" в "li". Итак, я заметил, что класс "li" "открыт", после чего я удаляю атрибут data-toogle

 var elementAbout = $(".dropdown a");

elementAbout.click( function() {
    if($("li.dropdown").hasClass("open")){
    elementAbout.removeAttr("data-toggle")
  }
})

https://jsfiddle.net/sercantimocin/v992z8er/3/

Ответ 3

Надеемся, что это то, чего вы пытаетесь достичь, добавьте event hide.bs.dropdown и обычно мы останавливаем распространение события на event.stopPropagation(); и preventDefault необходимо, если к элементу привязано какое-либо действие привязки или по умолчанию. Если размер экрана меньше 992px, проверьте проверку ширины экрана /heihgt как if (screen.height < '992') { }, а затем выполните e.preventDefault(); and e.stopPropagation();

$('.dropdown').on('hide.bs.dropdown', function(e) {
  e.preventDefault();
  e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'; return false;" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<ul class="custom">
  <li class="page-scroll">
    <a href="#home">Home</a>
  </li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us<span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="aboutus.html">Vision</a>
      </li>
      <li><a href="team.html">Founding Team</a>
      </li>
      <!--<li><a href="donors.html">Members</a></li>-->
    </ul>
  </li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Projects<span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="sample-campaign - vidya.html">Vidya Vistar</a>
      </li>
      <li><a href="sample-campaign - safai.html">Safai Abhyaan</a>
      </li>
      <li><a href="sample-campaign - clothes.html">Clothes Donation</a>
      </li>
      <li><a href="sample-campaign - food.html">Food Donation</a>
      </li>
      <li><a href="sample-campaign - onetime.html">Ad Hoc</a>
      </li>
    </ul>
  </li>
  <li class="page-scroll">
    <a href="#events">Events</a>
  </li>
  <li class="page-scroll">
    <a href="#gallery">Gallery</a>
  </li>
  <li class="page-scroll">
    <a href="#join">Get Involved</a>
  </li>
</ul>