響應式菜單無法在320px屏幕上打開

Question

我正在嘗試為響應式菜單實現此（ http://www.hongkiat.com/blog/responsive-web-nav/ ）腳本。 我按照所有步驟使用了正確的代碼，但菜單不會以320px的屏幕寬度打開。 任何人都可以告訴我如何解決這個問題？ 僅供參考：我是腳本編寫的新手。

非常感謝！

<?php

defined('_JEXEC') or die;

$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css'); 
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');

?>

<!DOCTYPE html>
<html>
<head>
    <jdoc:include type="head" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  
    <link rel="stylesheet" href="normalize.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $(function() {
            var pull        = $('#pull');
                menu        = $('nav ul');
                menuHeight  = menu.height();

            $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });

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

</head>

<body>
    <nav class='clearfix'>  
        <ul class='clearfix'> 
            <li><a href="#seapr">Sea PR?</a></li>
            <li><a href="#seaprvoor">Sea PR voor...</a></li>
            <li> <a href="#pr">Press Relations</a></li>
            <li><a href="#copywriting">Copywriting</a></li>
            <li><a href="#websites">Websites</a></li> 
            <li><a href="#contact">Contact</a></li> 
        </ul>
        <a href="#" id="pull">Menu</a>  
    </nav>
</body>
</html>

Answer 1

你可能想刪除這個：

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

並替換它

        $(window).resize(function() {
            if(menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });

Answer 2

在瀏覽了您的演示站點的源代碼之后，結果發現您還沒有包含nav.js文件：

<script src="http://demo.hongkiat.com/_nav/js/nav.js" type="text/javascript"></script>

響應式菜單無法在320px屏幕上打開

問題描述

2 個解決方案

解決方案1
1 2014-01-15 12:56:55

解決方案2
1 2014-01-15 13:00:26

響應式菜單無法在320px屏幕上打開

問題描述

2 個解決方案

解決方案1 1 2014-01-15 12:56:55

解決方案2 1 2014-01-15 13:00:26

解決方案1
1 2014-01-15 12:56:55

解決方案2
1 2014-01-15 13:00:26