DropKick.js 메뉴 - 페이지가로드 될 때 항상 열림

Question

반응 형 웹 사이트의 dropkick 메뉴에 문제가 있습니다. 사이트가 아이폰 크기가되면 dropkick.js를 사용하여이 드롭 킥 메뉴로 변경됩니다. 드롭 다운입니다.

내 HTML : 당신이 320 폭의 사이트를 볼 경우

<div id="mobilemenu"> 
    <a href="#" id="pull">Menu</a> 
</div> 

이 위의 코드 만 볼 수 있습니다.

내 자바 스크립트 : 난 정말 자바 스크립트에 대해 잘 모르는

<script type="text/javascript"> 
    $(function() { 
     var pull1 = $('#pull'); 
     menu1 = $('ul.menuresponsive'); 
     menuHeight = menu1.height(); 
     $(pull1).on('click', function (e) { 
      e.preventDefault(); 
      menu1.slideToggle(); 
     }); 

     $(window).resize(function() { 
      var w = $(window).width(); 
      if (w > 320 && menu.is(':hidden')) { 
       menu1.removeAttr('style'); 
      } 
     }); 
    }); 
</script> 

,이는 tutorial에서 찍은.

사이트가이 320 인 경우에 대한 나의 CSS : 지금 보이는 아래 그림과 같이 메뉴가 나는 그것을 매우 기본적이지만 I에 의해 폐쇄 될 것 같은, 항상 열려있는

/* Menu */ 
#mobilemenu { display:block !important; margin-bottom:20px; } 
#mobilemenu ul { margin:12px 0 0 0 !important; list-style:none; padding:0 10px 0 10px } 
#mobilemenu ul li { float:none !important; font-size:16px; padding:5px 0 5px; font-weight:bold; border-bottom:1px solid #000; } 
#mobilemenu ul li a { color:#333; text-decoration:none; } 
/* Drop */ 
#mobilemenu ul li ul li { font-size:14px; font-weight:normal; border:none; color:#000; } 

/* Pull */ 
#pull { display:block !important; text-align:center; color:#fff; text-decoration:none; padding:10px 0 10px 0; font-size:16px; font-weight:bold; } 
#menu { display:none; } 

해결책을 찾지 못하는 것 같습니다. 515px 다른 하나는 320 ~ 하나 -

내 메뉴를 동적으로 데모 예제에 링크 튜토리얼에서 <div id="mobilemenu">

Answer 1

내부 <ul> 및 <li> A와 렌더링이 미디어 쿼리가 있습니다.

515px에 대한 CSS는 320px 코드에 상속되며 내가 생각하는 메뉴를 닫는 데 필요한 코드가 포함되어 있습니다. 미디어 쿼리에이 코드를 추가

시도 :

nav { 
    border-bottom: 0; 
} 
nav ul { 
    display: none; 
    height: auto; 
} 
nav a#pull { 
    display: block; 
    background-color: #283744; 
    width: 100%; 
    position: relative; 
} 
nav a#pull:after { 
    content:""; 
    background: url('nav-icon.png') no-repeat; 
    width: 30px; 
    height: 30px; 
    display: inline-block; 
    position: absolute; 
    right: 15px; 
    top: 10px; 
}