CSS下拉菜單onclick

Question

我嘗試在點擊時創建一個下拉菜單。 當我單擊“菜單”時，我試圖切換兩個類，並在導航欄上的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')
});
});

標頭還有更多樣式，但是我認為並不重要。對不起，如果我不清楚。

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 個解決方案

解決方案1
1 已采納 2015-08-13 22:25:06

CSS下拉菜單onclick

問題描述

1 個解決方案

解決方案1 1 已采納 2015-08-13 22:25:06

解決方案1
1 已采納 2015-08-13 22:25:06