0

расположил 2 navbar-collapse в ряд с помощью float:left;
При свернутом меню не корректно работает переход с одного открытого списка на другой , подскажите как наиболее просто решить проблему .

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Пример</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<style>
  body {
    padding-top: 70px;
  }
  
  #navbar-collapse-links {
    float: left;
  }
</style>

<body>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-account">
	    <span class="glyphicon glyphicon-user"></span> 
        </button>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-links">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>

      <div class="collapse navbar-collapse" id="navbar-collapse-links">
        <ul class="nav navbar-nav">
          <li><a href="#">Action1</a></li>
          <li><a href="#">Action2</a></li>
          <li><a href="#">Action3</a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->

      <div class="collapse navbar-collapse" id="navbar-collapse-account">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->

    </div>
  </nav>

</body>
<script>
  
  $('#navbar-collapse-links').on('show.bs.collapse', function() {
    $('#navbar-collapse-account').collapse("hide");
  })
  $('#navbar-collapse-account').on('show.bs.collapse', function() {
    $('#navbar-collapse-links').collapse("hide");
  })
  
  $(document).on('click', function() {
    $('.collapse').collapse('hide');
  })
  
</script>

</html>

2
  • 1
    Можно у кнопок убрать data-toggle="collapse" и назначить им обработчик onClick, где сначала сворачивать "соседнее" меню и разворачивать собственное 4 сен 2018 в 20:51
  • @Dmitry Kozlov сделайте ответом свой комментарий
    – SergeyE
    5 сен 2018 в 6:27

2 ответа 2

1

В итоге остановился на следующем решении

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Пример</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<style>
  body {
    padding-top: 70px;
  }
  
  #navbar-collapse-links {
    float: left;
  }
  @media (max-width: 768px) {
  #navbar-collapse-links {
    float: none;
  }  
  }
  
</style>

<body>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-account">
	    <span class="glyphicon glyphicon-user"></span> 
        </button>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-links">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>

      <div class="collapse navbar-collapse" id="navbar-collapse-links">
        <ul class="nav navbar-nav">
          <li><a href="#">Action1</a></li>
          <li><a href="#">Action2</a></li>
          <li><a href="#">Action3</a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->

      <div class="collapse navbar-collapse" id="navbar-collapse-account">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->

    </div>
  </nav>

</body>
<script>

  $(document).on('click', function() {
    $('.collapse').collapse('hide');
  })
  
</script>

</html>

0

Можно у кнопок убрать data-toggle="collapse" и назначить им обработчик onClick, где сначала сворачивать "соседнее" меню и разворачивать собственное

1
  • Запутался с событиями в скриптах , переопределил свойства в медиа - вроде всё работает правильно , спасибо !
    – SergeyE
    5 сен 2018 в 8:33

Ваш ответ

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

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