Question

我尝试点击下拉菜单。我点击“菜单”时尝试切换两个类，并在导航栏上的0 max-height和20 em max-height之间切换。但正如我所知，当我有0个最大高度时，它会像占位符那样占据一个白色空间。我不希望这样，因为它混淆了我对网站的看法。我正在考虑显示：阻止和显示：没有，但我知道你不能在这两者之间转换。当我点击指定的地点时，有没有办法在点击时创建一个下拉菜单？编辑：

我有这段代码：

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')
});
});

标题有更多样式，但我认为并不重要。如果我不清楚的话。

Answer 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>

CSS下拉菜单onclick

1 个答案: