Question

我的响应式菜单有些问题。点击链接时我无法再次上传。我已经使用了一些Ajax和jQuery来使菜单网站保留在首页，但我只是无法弄清楚出了什么问题？

该网站可在此处查看：www.sverkel.dk/m_index.php

HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/menu.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
</head>

<body>

<div>

    <center><img src="http://oi60.tinypic.com/2ykaurc.jpg"></center>

</div>

<div class="handle"><img src="http://oi58.tinypic.com/mn0w95.jpg"></div>

<nav>

    <ul id="nav">
    <li><a href="index">Forside</a></li>
    <li><a href="produkter">Produkter</a></li>
    <li><a href="priser">Priser</a></li>
    <li><a href="om">Om os</a></li>
    <li><a href="kontakt">Kontakt</a></li>
</ul>


</nav>

<section>

<script>

    $('.handle').on('click', function(){
        $('nav ul').toggleClass('showing');

        });

</script>

</section>

<div class="tekst" align="center" id="content"></div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/general.js"></script>

</div>

</body>
</html>

CSS：

body {

margin: 0;
padding: 0;
font-family: arial;


}


img, object {
max-height: 100%; 
max-width: 100%;


}


.i {

text-align: left;
padding: 1px 15px;



}


a {

text-decoration: none;
color:inherit;  


}


nav ul {

background-color: #a34949;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;

}


nav ul li {

display:inline-block;
padding: 20px;
border-top:1px solid #fff;


}


nav ul li:hover {
background-color: #ae3a43;


}


section {

line-height: 1.5em; 
font-size: 0.9em;
padding: 10px;
width: 75%;
margin: 0 auto;


}


.handle {
width: 100%;
background: #a34949;
margin: 0 auto;
text-align: left;
box-sizing:border-box;
padding: 10px 10px;
cursor: pointer;
color: white;
display: block!important;


}


@media screen and (max-width: 750px) {

nav ul {
max-height: 0;


}

.showing{
max-height: 20em;

}


nav ul li {

box-sizing: border-box;
width: 100%;
padding: 15px;
text-align: left;

}


.handle {
display:block;

}

}

Answer 1

您的切换位于手柄上，只是图标栏。如果您希望在导航中的任何位置单击该行为，则应将其添加到选择器。

$('.handle, nav').on('click', function(){
    $('nav ul').toggleClass('showing');
});

Answer 2

最终

HTML：

<div>
    <div>
        <center><img src="http://oi60.tinypic.com/2ykaurc.jpg"></center>
    </div>

    <div class="handle"><img src="http://oi58.tinypic.com/mn0w95.jpg">
        <nav>
            <ul id="nav">
                <li><a href="index">Forside</a></li>
                <li><a href="produkter">Produkter</a></li>
                <li><a href="priser">Priser</a></li>
                <li><a href="om">Om os</a></li>
                <li><a href="kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </div>

    <div class="tekst" align="center" id="content"></div>
</div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/general.js"></script>

general.js

$(document).ready(function() {
    // toggle menu
    $('.handle').on('click', function(){
        $('nav ul').toggleClass('showing');
    });

    // load index page
    $('#content').load('content/index.php');

    // load clicked page
    $('#nav').on('click', 'a', function(e) {
        // trigger the toggle so it closes
        $('.handle').trigger('click');

        var page = $(this).attr('href');

        // do load
        $('#content').load('content/' + page + '.php');

        return false;
    });
});

http://jsfiddle.net/hoo5nzfu/3/

响应式菜单不会关闭

2 个答案: