Question

调整大小时，我正在努力调整我的徽标和菜单。如果您要加载页面并且窗口宽度低于500px并且您单击navicon一切正常。但是，如果我将浏览器窗口调整为更高的宽度并返回到500px以下，则徽标和导航将切换两者。

我希望我的徽标在我点击导航图标时切换开来并显示导航，特别是在调整大小时。

var menu = $(".nav");
var toggle = $('#navicon');


$(function() {
  $(toggle).on('click', function(e) {
    e.preventDefault();
    menu.toggle();
    if ($(window).resize && $(window).width() <= 500) {
      $('#logo').toggle();
    }

  });

});


$(window).resize(function() {
  if ($(window).width() > 500) {
    $('.nav').show();
    $('#logo').show();
  }
})

#logo {
  width: 150px;
}

.nav {
  display: inline;
  position: relative;
}

#navicon {
  position: absolute;
  right: 2.5em;
  top: 2em;
  display: none;
}

@media (max-width: 780px) {
  .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav {
    display: none;
  }
  #navicon {
    display: block;
  }
  #logo {
    width: 100px !important;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-light navbar-fixed-top ">

  <a href><img id="logo" class="img-fluid pull-md-left m-a-0" src="http://www.trainingsrausch.net/wp-content/uploads/2015/07/TR-logo-CMYK.png"></a>
  <span class="m-r-3" id="navicon">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
          &#9776;
        </button>
      </span>
  <ul class="nav navbar-nav pull-md-right m-y-2 m-r-3">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Mitmachen</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
</nav>
<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

我试图找到类似的问题，如果有的话，请告诉我！

谢谢！

Answer 1

首先，我更新了你的代码，因为Bootstrap正在使用移动优先方法。

我认为这是你想要的：

http://jsbin.com/rufuyebufu/10/edit?html,css,js

Answer 2

你可能还想考虑一种更轻松的方法（少用JavaScript）：

$('#navicon').click(function() {
  $('body').toggleClass('menuOn');
});

$(window).resize(function() {
  if ($(window).width() > 780) {
    $('body').removeClass('menuOn');
  }
});

其他CSS：

@media (max-width:780px) {

  .menuOn #logo {display:none;}

  .nav {display:none;}

  .menuOn .nav {display:inline;}
}

https://jsfiddle.net/ft2o8ra9/

Jquery菜单和徽标切换

2 个答案: