CSS 下拉菜单 onclick答案

【问题标题】：CSS Dropdown menu onclickCSS 下拉菜单 onclick
【发布时间】：2015-08-13 21:35:52
【问题描述】：

我尝试在点击时创建一个下拉菜单。当我单击“菜单”并在导航栏上的 0 max-height 和 20 em max-height 之间切换时，我尝试切换两个类。但是正如我所看到的，当我的最大高度为 0 时，它占用了一个空白空间，就像一个占位符。我不想这样，因为它弄乱了我对网站的看法。我在想 display:block 和 display:none 但我知道你不能在这两者之间转换。当我单击指定位置时，有什么方法可以在单击时创建下拉菜单？编辑：

我有这个代码：

html：

<header>
<nav>
<div class="handle">Menu</div>
<ul>
<li><a id="active" href="index.html">HOME</a></li>
<li><a href="collection.html">PRODUCTS</a></li>
<li><a href="events.html">EVENTS</a></li>
<li><a href="info.html">CONTACT</a></li>
</ul>
</nav>
</header>

和css：

.handle{
    width: 100%;
    background:#333333;
    text-align: left;
    box-sizing: border-box;
    padding:15px 10px;
    cursor: pointer;
    display: none;
    color: white;
    box-sizing: border-box;
}

@media (max-width:980px){

    .showing{
        max-height:20em ;
    } 
 nav ul{
        max-height: 0;

    }
}

和 JS：

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

标题还有一些样式，但我认为这并不重要。如果我不清楚，请见谅。

【问题讨论】：

看不懂"this".str_rev();！
请创建 Jsfiddle 或以某种方式共享代码。以便我们更好地帮助您。

标签： javascript jquery html css menu

【解决方案1】：

此代码对我有用。希望会有所帮助...

  <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>On click Menu</title>
        <style>
            .handle{
                width: 100%;
                background:#333333;
                text-align: left;
                box-sizing: border-box;
                padding:15px 10px;
                cursor: pointer;
                color: white;
                box-sizing: border-box;
            }

            .hide {
                display: none;
            }
        </style>
    </head>
    <body>
        <nav>
            <div class="handle">Menu</div>
            <ul class="hide">
                <li><a id="active" href="index.html">HOME</a></li>
                <li><a href="collection.html">PRODUCTS</a></li>
                <li><a href="events.html">EVENTS</a></li>
                <li><a href="info.html">CONTACT</a></li>
            </ul>
        </nav>

        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script>

            $(document).ready(function() {
                $('.handle').on('click', function() {
                    $('nav ul').slideToggle();
                });
            });

        </script>
    </body>
</html>

【讨论】：

是的，它可以工作，但我想要在隐藏和显示菜单之间转换
我已经更新了代码。只需使用 slideToggle 函数进行转换即可。