Question

我在主菜单崩溃时尝试调整页面内容。发生的事情是从该菜单中删除的链接保留在内容的顶部，我希望它也会下降。我确实有一些来自Wordpress的网页集成在我的网站上，内容有所下降，但不幸的是我看不到wordpress的代码。

这是HTML：

<nav id="navigation">
<a class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">&#9776;  MENU</a>
<ul id="navigation_list" role="navigation">
    <li><a href="Dicas.html">Dicas</a></li>
    <li><a href="Viagens.html">Viagens</a></li>
    <li><a href="Paises.html">Paises</a></li>
    <li><a href="Comboios.html">Comboios</a></li>
    <li><a href="http://localhost/Interrail/public_html/blog/wordpress/">Blog</a></li>
</ul>

Javascript：

<script>
    var originalNavClasses;

    function toggleNav() {
        var elem = document.getElementById('navigation_list');
        var classes = elem.className;
        if (originalNavClasses === undefined) {
            originalNavClasses = classes;
        }
        elem.className = /expanded/.test(classes) ? originalNavClasses : originalNavClasses + ' expanded';
    }
</script>

CSS：

#navigation {
padding: 10px;
background-color: #000;
color: #fff;
text-align: right;}

#navigation ul {
display: none;
list-style: none;
margin-right: 0;
padding-left: 0;
margin-bottom: 0;}

#navigation ul.expanded {
display: block;}

#navigation li a {
display: block;
padding: 10px 0;
border-top: 1px solid #666;
font-size: 1.2em;
color: #ccc;
text-decoration: none;}

.menu_button {
display: block;
text-align: right;
color: #ffc;
text-decoration: none;}

.menu_button:hover {
color: #58cbdb;
text-decoration: none;}

这是我的FIDDLE LINK

Answer 1

试试这个http://jsfiddle.net/VE7dQ/4/

  $(function () { 
  $('.menu_button').click(function () {
    var originalNavClasses ="";
   var elem = document.getElementById('navigation_list');
    var classes = elem.className;
    if (originalNavClasses === undefined) {
        originalNavClasses = classes;
    }
    elem.className = /expanded/.test(classes) ? originalNavClasses : originalNavClasses + ' expanded';
  });

}）;

下拉菜单崩溃时内容不会下降

1 个答案: