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 个答案: