爲什麼此移動導航切換功能無法正常工作？

我想創建一個移動導航（切換類型）在突破點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屏幕它不是穩定......這是第三次來到李一號以上..

但同樣爵士小提琴作品here the sample js toggle I tested ，我想該網站是有點不同。 SITE

我該如何得到它的工作？該問題與wordpress有關？

來源

2015-05-19 Foolish Coder

我可以在移動視圖中看到。您的js腳本中有101行錯誤 –

您是否在文檔準備好的回調中在頁面上運行代碼？ – marcel

@DrixsonOseña我已經將'$'更改爲'Jquery'，但仍然存在問題。buit我無法看到源文件中顯示的螢火蟲錯誤。現在它說92線上 –

試試這個：

<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>

來源

2015-05-21 05:32:08

感謝它炒鍋..但我不清楚這個代碼.. –

爲什麼此移動導航切換功能無法正常工作？

回答

相關問題