0

Подскажите пожалуйста, использую collapse-menu от bootstrap. Когда в режиме responsive, меню сворачивается обратно, только когда нажимаешь снова на иконке меню. Как можно сделать, чтобы оно сворачивалось при клике в любом месте экрана?

Вот html стандартный

    <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>


                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="#sec1">Home</a></li>
                                <li><a href="#sec2">About me</a></li>
                                <li><a href="#sec3">Resources</a></li>
                                <li><a href="#sec4">My work</a></li>
                                <li><a href="#sec5">Contact me</a></li>
                            </ul>
                        </div>

1 ответ 1

1

Добавить:

  $(document).on('click',function(){
    $('.collapse').collapse('hide');
  })

  $(document).on('click',function(){
$('.collapse').collapse('hide');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="navbar-header navbar-inverse">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
  </div>


  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

    <ul class="nav navbar-nav navbar-right">
      <li><a href="#sec1">Home</a></li>
      <li><a href="#sec2">About me</a></li>
      <li><a href="#sec3">Resources</a></li>
      <li><a href="#sec4">My work</a></li>
      <li><a href="#sec5">Contact me</a></li>
    </ul>
  </div>

2
  • Заработало!!! Спасибо огромное!!!!!!!
    – Ksu Lyguta
    25 авг 2016 в 22:51
  • @KsuLyguta, Здорово, рада помочь. А ответ можно отметить)
    – SVE
    26 авг 2016 в 4:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.