Question

我正在创建一个响应式菜单，我正在使用slidetoggle。我点击一个元素来触发.menu元素上的slideToggle。该元素的html和css如下所示：

<nav id="site-navigation" class="main-navigation clearfix" role="navigation">
            <a href="#" id="responsive-menu" class="visible-xs active"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>

            <div class="menu">
                       <ul>
                           <li class="page_item page-item-9"><a href="http://dev.monkeyapps.nl/contact/">Contact</a></li>
                           <li class="page_item page-item-5"><a href="http://dev.monkeyapps.nl/features/">Features</a></li>
                           <li class="page_item page-item-2"><a href="http://dev.monkeyapps.nl/voorbeeld-pagina/">Over MonkeyApps</a></li>
                           <li class="page_item page-item-7"><a href="http://dev.monkeyapps.nl/prijzen/">Prijzen</a></li>
                      </ul>
            </div>

</nav>

与这些元素相关的所有CSS：

.main-navigation {
    margin: 20px 0;
    padding: 0 25px;    
}

.main-navigation a#responsive-menu {
    color: #fff;
    font-size: 32px;
    float: right;
}

.main-navigation a#responsive-menu:hover,
.main-navigation a#responsive-menu:focus {
    text-decoration: none;
}

.main-navigation a#responsive-menu i {
    display: none;
}

    .main-navigation a#responsive-menu i:first-child {
        display: inline;
    }

    .main-navigation a#responsive-menu.active i:first-child {
        display: none;
    }

    .main-navigation a#responsive-menu.active i {
        display: inline;
    }

.menu {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
}

.main-navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

    .main-navigation ul li {
        display: block;
        width: 100%;
        height: 45px;
        line-height: 45px;
        text-align: center;
        background: #0091ea;
    }

        .main-navigation ul li a {
            display: inline-block;
            font-family: 'Alright_bold';
            font-size: 16px;
            font-weight: normal;
            color: #fff;
            width: 100%;
            height: 45px;
            line-height: 45px;
            text-align: center;
            position: relative;
            padding-bottom: 3px;
        }

        .main-navigation ul li a:hover {
            text-decoration: none;
        }

        .main-navigation ul li a:before {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            width: 0;
            transition: width 0s ease, background .5s ease;
        }

        .main-navigation ul li a:after {
            content: '';
            display: block;
            position: absolute;
            right: 0;
            bottom: 0;
            height: 3px;
            width: 0;
            background: #fff;
            transition: width .5s ease;
        }

        .main-navigation ul li a:hover:before {
            width: 100%;
            background: #fff;
            transition: width .5s ease;
        }

        .main-navigation ul li a:hover:after {
            width: 100%;
            background: transparent;
            transition: all 0s ease;
        }

如您所见，菜单中有一个包装器，触发移动菜单的按钮。 jquery的位，包括slideToggle：

$('#responsive-menu').click(
     function () {
       $(".menu").slideToggle();
       $("#responsive-menu").toggleClass("active");
     }
);

事实上，slideToggle实际上是触发的，并且发生了一些事情。也没有任何错误。虽然菜单不可见，但我真的无法弄清楚原因，有谁知道如何解决这个问题？

问题的JSFiddle：

JSFiddle

Answer 1

实际上您正在使用jquery alpha

使用此jquery： http://code.jquery.com/jquery-1.9.1.js

＆＃13;

$(document).ready(function(){


	$('#responsive-menu').click(
	     function () {
	       $(".menu").slideToggle();
	       $("#responsive-menu").toggleClass("active");
	     }
	);
	
});

＆＃13;

.main-navigation {
    margin: 20px 0;
    padding: 0 25px;    
}

.main-navigation a#responsive-menu {
    color: #000;
    font-size: 32px;
    float: right;
}

.main-navigation a#responsive-menu:hover,
.main-navigation a#responsive-menu:focus {
    text-decoration: none;
}

.main-navigation a#responsive-menu i {
    display: none;
}

    .main-navigation a#responsive-menu i:first-child {
        display: inline;
    }

    .main-navigation a#responsive-menu.active i:first-child {
        display: none;
    }

    .main-navigation a#responsive-menu.active i {
        display: inline;
    }

.menu {
    /*display: none;*/
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
}

.main-navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

    .main-navigation ul li {
        display: block;
        width: 100%;
        height: 45px;
        line-height: 45px;
        text-align: center;
        background: #0091ea;
    }

        .main-navigation ul li a {
            display: inline-block;
            font-family: 'Alright_bold';
            font-size: 16px;
            font-weight: normal;
            color: #000;
            width: 100%;
            height: 45px;
            line-height: 45px;
            text-align: center;
            position: relative;
            padding-bottom: 3px;
        }

        .main-navigation ul li a:hover {
            text-decoration: none;
        }

        .main-navigation ul li a:before {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            width: 0;
            transition: width 0s ease, background .5s ease;
        }

        .main-navigation ul li a:after {
            content: '';
            display: block;
            position: absolute;
            right: 0;
            bottom: 0;
            height: 3px;
            width: 0;
            background: #fff;
            transition: width .5s ease;
        }

        .main-navigation ul li a:hover:before {
            width: 100%;
            background: #fff;
            transition: width .5s ease;
        }

        .main-navigation ul li a:hover:after {
            width: 100%;
            background: transparent;
            transition: all 0s ease;
        }

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<nav id="site-navigation" class="main-navigation clearfix" role="navigation">
            <a href="#" id="responsive-menu" class="visible-xs"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>

            <div class="menu" style="display:none;">
                       <ul>
                           <li class="page_item page-item-9"><a href="http://dev.monkeyapps.nl/contact/">Contact</a></li>
                           <li class="page_item page-item-5"><a href="http://dev.monkeyapps.nl/features/">Features</a></li>
                           <li class="page_item page-item-2"><a href="http://dev.monkeyapps.nl/voorbeeld-pagina/">Over MonkeyApps</a></li>
                           <li class="page_item page-item-7"><a href="http://dev.monkeyapps.nl/prijzen/">Prijzen</a></li>
                      </ul>
            </div>

</nav>

＆＃13;

Answer 2

任何绝对定位的元素都将从正文中获取左/上位置，而不是在它被包含的块内。因此，如果您希望它包含在父元素中，那么父元素应该相对定位，然后如果子元素是绝对定位的，那么左/上位置将在父容器中计算。

尝试将z-index应用于.menu：

.menu {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    z-index:1; // number as needed
}

如果您想在父nav元素中包含它，那么您可以使用position:relative;到nav元素：

.main-navigation {
    margin: 20px 0;
    padding: 0 25px;  
    position:relative;  
}

更新

您已经使用了jquery 3.0的alpha版本，我猜这仍然在开发中。你应该使用2.x或1.x版本的jquery，它是生产就绪的，可以从jquery下载。

Answer 3

当您使用javascript更改样式时，javascript将样式内联，并删除内联样式，但CSS工作表中定义的样式仍然存在且处于活动状态。因此，当它切换时，它会删除内联样式，但CSS中仍然会显示：none。因此没有显示菜单。

从CSS中删除display: none;并将其添加到内联中，以便在页面加载时不会显示：

fiddle

.menu {
    /*display: none;*/
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
}

并在HTML中：

<div class="menu" style="display:none;">

jQuery slideToggle（）不使用display：none来处理div

3 个答案:

更新