Jquery Menu and Logo Toggle

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

첫째, 부트 스트랩이 모바일 우선 접근 방식을 사용하기 때문에 코드를 조금 업데이트했습니다.

나는이 당신이 원하는 것을 생각 :

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/