Почему этот мобильный навигационный переключатель не работает должным образом?

Question

Я пытаюсь создать мобильную навигацию (тип переключения) в точке прерывания 768px.

Мой наценка является:

<div class="tm_menu_mobile"> 

    <div class="menu_icon"> 
     <div class="three_line"></div> 
     <div class="three_line"></div> 
     <div class="three_line"></div> 
    </div> 
     <div style="clear:both;"></div> 

    <div id="nav"> 
     <div class="navigasi_menu"> 
      <div class="navigasi_list"> 
       <div class="nav-menu"> 
        <ul> 
         <li class="page_item page-item-7"><a href="#">Home</a></li> 
         <li class="page_item page-item-2"><a href="#">Sample Page</a></li> 
         <li class="page_item page-item-9"><a href="#">test page 1</a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 

</div> 

это мобильная навигация должна быть скрыты экраны шириной более 768px. Поэтому я ставлю следующий Java код сценария в заголовку:

/* Mobile navigation*/ 
jQuery(document).ready(function() { 
    $('#nav').hide(); 
    $('.menu_icon').click(function() { 
      $('#nav').slideToggle('fast'); 
      return false; 
     }); 
}); 

и я поставил следующий код CSS в моей таблице стилей:

/* Primary mobile menu */ 
.tm_menu_mobile { 
    display: block; 
    margin: 15px auto !important; 
    width: 98.5% !important; 
    background:#0071B7; 
    padding:6px; 
    height:auto; 
    overflow:hidden; 
} 
/* avoiding horizontal scroll bar across the site */ 
.navigasi_menu { 
    width: 100% 
} 
.navigasi_menu li { 
    float: none; 
    text-align: center; 
    border-bottom: 1px solid #fff; 
} 
/* Making navigation li one below another */ 
.navigasi_menu li:hover { 
    width: 100% 
} 
.tm_menu_mobile .menu_icon { 
    width:50px; 
    height:50px; 
    border-radius: 10px; 
    border:2px solid #000; 
    float:right; 
    margin-right:10px; 
} 
.menu_icon .three_line { 
    float:none; 
    width:36px; 
    height:5px; 
    background:#fff; 
    margin:9px auto; 
} 
.tm_menu_mobile #nav { 
    display: inline-block; 
} 

но переключаться не работает. Кроме того, когда я зависание навигации в 768px экрана это не стабильное ... это третий литий приходит выше 1 ..

но та же JS скрипку работа here the sample js toggle I tested и сайт я пытаюсь это немного по-другому. SITE

Как я могу заставить его работать? проблема связана с wordpress ??

Answer 1

Попробуйте это:

<script type="text/javascript">   
    /* Mobile navigation toggle*/ 
    jQuery(document).ready(function() { 
     jQuery('.tm_menu_mobile #nav').hide(); 
     jQuery('.menu_icon').click(function() { 
       jQuery('.tm_menu_mobile #nav').slideToggle('fast'); 
       return false; 
      }); 
    });     
</script>