Отзывчивое меню не будет закрыто

-2

У меня есть некоторые проблемы с моим отзывчивым меню. Я не могу заставить его подниматься снова, когда я нажимаю ссылку. Я использовал некоторые 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; 

} 

}

источник

2015-09-21 Sverkel

просьба представить более подробную информацию о том, что проблема вашего облицовочный – CY5

Извините. Когда на мобильной странице вашего смартфона меню не будет возвращаться, когда я нажму на один из пунктов меню. Меню просто не работает. – Sverkel

Итоговые

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/

источник

2015-09-21 12:42:28

Благодарим вас за комментарии, но это все равно не сработает :( – Sverkel

@Sverkel попробуйте использовать 'e.preventDefault()' вместо 'return false;'! –

Я пробовал разные вещи с возвратом false, но ничего нет работая, даже не e.preventDefault()? – Sverkel

Ваш переключатель на ручке, которая это только панель значков. Если вы хотите, чтобы поведение произошло при нажатии в любом месте навигация, вы должны добавить его в селектор.

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

источник

2015-09-21 12:38:53 Underfrog

Если я это сделаю, меню будет вверх и вниз, когда я нажму кнопку /, но это не сработает, если я нажму кнопку/вкладку в тексте ссылки меню, если я нажимаю рядом с текстом, меню идет вверх и вниз. – Sverkel

он работает для меня везде, где я нажимаю, он также переходит к указанному URL-адресу. В каком браузере вы работаете? http://jsfiddle.net/kt4jrqzq/ – Underfrog

Я пробовал Safari и Chrome на iOS и Mac OS и Internet Explorer и Chrome в Windows 10, ни одна из них не работает. Он также не работает прямо в jsfiddle, к которому вы привязываетесь. Там вы не видите текст. – Sverkel

Отзывчивое меню не будет закрыто

ответ

Смежные вопросы