向響應式導航菜單添加向下滑動效果

Question

我有以下jsfiddle ，我試圖讓下拉菜單具有向下滑動效果（或任何可以柔化默認懸停效果的效果）。 問題僅發生在桌面布局中，即 >= 600px 屏幕

到目前為止，我已經嘗試向 css 樣式添加過渡，但這不起作用：

header > div#bottom-container nav > ul > li > nav{
    max-height:0
    transition: height 1s ease;
}  

header > div#bottom-container nav > ul > li:hover > nav{
    max-height:500px
}  

我也試過添加一個 jQuery 懸停功能，但也無法讓它工作。 jQuery 似乎是最好的選擇，但我的代碼似乎非常不穩定：

$("header > div#bottom-container > nav > ul > li").hover(function (e) {
  e.preventDefault();
  if($( window ).width() >= "600") {
    if($(this).siblings().size() > 0 ) {
      $(this).siblings().slideToggle("slow");
    }
  }
});

想知道是否有人可以指出我在這里做錯了什么？

Answer 1

• 刪除了header>div#bottom-container nav>ul>li:hover>nav類
• 將id="test1"添加到<nav> (可以替換為 find child nav)
• 添加切換到點擊（可以用懸停代替）希望這有幫助

更新 2： - 更改了$("header > div#bottom-container > nav > ul > li").mouseenter(function(e) {目標 li 而不是 a - 添加了$("header > div#bottom-container > nav > ul > li").mouseleave(function(e) { - 動態檢測子導航$(this).find("nav").show("slow")

 $(document).ready(function() { $("#navToggle a").click(function(e) { e.preventDefault(); $("header > div#top-container").slideToggle("slow"); $("header > div#bottom-container > nav").slideToggle("slow"); $("#logo").toggleClass("menuUp menuDown"); }); $(window).resize(function() { if ($(window).width() >= "600") { $("header > div#top-container").show(); $("header > div#bottom-container > nav").show(); if ($("#logo").attr('class') == "menuDown") { $("#logo").toggleClass("menuUp menuDown"); } } else { $("header > div#top-container").hide(); $("header > div#bottom-container > nav").hide(); } }); $("header > div#bottom-container > nav > ul > li").mouseenter(function(e) { $(this).find("nav").show("slow") if ($(window).width() <= "600") { if ($(this).siblings().size() > 0) { e.preventDefault(); console.log($("#test1")) $("#test1").css("display", "block !Important") } } }); $("header > div#bottom-container > nav > ul > li").mouseleave(function(e) { $(this).find("nav").hide("slow") if ($(window).width() <= "600") { if ($(this).siblings().size() > 0) { e.preventDefault(); console.log($("#test1")) $("#test1").css("display", "block !Important") } } }); });

 * { margin: 0; padding: 0; outline: none; box-sizing: border-box; } /* 1em @ 48em (768px) increasing to 2em @ 120em (1920px) */ @media (min-width: 48rem) { :root { font-size: calc(1rem + ((1vw - .48rem) * 1.389)); /* .48rem = viewportWidthMinimum /100 */ /* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */ } } /* Stop font scaling above 1920px */ @media (min-width: 120em) { :root { font-size: 2rem; } } body { background: #eee; color: #444; -webkit-font-smoothing: antialiased; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; font-weight: 400; height: auto !important; height: 100%; min-height: 100%; text-rendering: optimizeLegibility; } header { /* background-color: rgb(140, 193, 193); border-bottom: 1px solid rgba(0,0,0,.15); text-align: center; */ } header>.menuDown { box-shadow: 0 3px 5px rgba(0, 0, 0, .15); } header>.menuUp { box-shadow: none; } header>div#navToggle { background-color: rgba(0, 0, 0, .15); position: absolute; right: 0; top: 0; transition: all 300ms ease; } header>div#navToggle:hover { background-color: rgba(0, 0, 0, .1); } header>div#navToggle>a { color: rgba(255, 255, 255, .85); display: block; font-size: 0.85em; font-weight: 600; padding: 0 2.5rem; text-decoration: none; transition: all 300ms ease; } header>div#navToggle:hover>a { color: rgba(255, 255, 255, 1); } header>#top-container { display: none; } header>div#bottom-container { display: flex; flex-direction: column; text-align: center; } header>div#bottom-container>nav { background-color: rgb(250, 209, 14); display: none; flex: 1; flex-grow: 1; transform: all 300ms ease; } header>div#bottom-container nav>ul { list-style-type: none; } header>div#bottom-container nav>ul>li { border-bottom: 1px dotted rgba(0, 0, 0, .1); position: relative; } header>div#bottom-container nav>ul>li:last-of-type { border-bottom: none; } header>div#bottom-container nav>ul>li>a { display: block; color: rgba(0, 0, 0, .65); font-weight: 700; padding: 1.5rem 0; text-decoration: none; transition: all 250ms ease; } header>div#bottom-container nav>ul>li>a span.toggle { background-color: rgba(0, 0, 0, .05); border-radius: 3rem; color: rgba(0, 0, 0, .25); /* font-size: 0.75em; */ font-weight: 500; padding: 2px 8px; text-transform: lowercase; } header>div#bottom-container nav>ul>li>a span.caret { display: none; } header>div#bottom-container>nav>ul>li:hover>a { color: rgba(42, 35, 0, .5); } header>div#bottom-container>nav>ul>li>nav { display: none; overflow: hidden; position: absolute; right: 5%; width: 90%; z-index: 100; background-color: rgb(51, 51, 51); } /** header nav > ul > li > nav{ display: none; overflow: hidden; position: absolute; left: 0; top: 87px; width: 100%; border-top: 3px solid #176071; z-index: 100; background: #ffffff; border-radius: 0 0 3px 3px; -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75); -webkit-transition: all .25s ease .25s; -moz-transition: all .25s ease .25s; -o-transition: all .25s ease .25s; -ms-transition: all .25s ease .25s; transition: all .25s ease .25s } */ header>nav>ul>li>nav>ul>li>a { color: rgba(255, 255, 255, .85); transition: all 300ms ease; } header>nav>ul>li>nav>ul>li:hover>a { background-color: rgba(0, 0, 0, .6); color: rgba(255, 255, 255, 1); } /** header > nav > ul > li:hover > nav.desk { display:block!Important; } */ /* Medium screens */ @media all and (min-width: 600px) { header>#top-container { background-color: red; display: flex !Important; flex-direction: row; line-height: 90px; padding: 0 3rem; text-align: left; width: 100%; } header>#top-container>div#box { flex: 1; /* display: flex; flex-flow: row wrap; justify-content: center; display: block; */ } header>#top-container>.box1 { background-color: green; flex-basis: 400px; } header>div#navToggle { display: none; } header>div#bottom-container { background-color: rgb(250, 209, 14); color: rgba(42, 35, 0, 1); flex-direction: row; line-height: 90px; padding: 0 3rem; position: fixed; text-align: left; width: 100%; border-top: .3rem solid #F9E484; box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.65); } header>div#bottom-container>nav { background-color: transparent; display: block; } header>div#bottom-container>nav>ul { display: flex; flex-flow: row wrap; justify-content: center; } header>div#bottom-container nav>ul>li { border-bottom: none; position: static; } header>div#bottom-container nav>ul>li>a { padding: 0 1.25rem; } header>div#bottom-container nav>ul>li>a span.toggle { display: none; } header>div#bottom-container nav>ul>li>a span.caret { border-bottom: 4px solid transparent; border-top: 4px solid rgba(42, 35, 0, 1); border-right: 4px solid transparent; border-left: 4px solid transparent; border-radius: 1px; content: ""; display: inline-block; height: 0; margin: 0 0 0 .25rem; transition: 250ms all ease; width: 0; vertical-align: middle; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header> <div id='top-container'> <div id="box" class='box1'>logo</div> <div id="box" class='box2'>our story</div> <div id="box" class='box3'>contact us</div> <div id="box" class='box4'>gift us a review</div> </div> <div id="navToggle"><a href="#">Menu</a></div> <div id='bottom-container'> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li> <a href="#">Blog <span class="toggle">Expand</span><span class="caret"></span></a> <nav id="test1"> <ul> <li><a href="#">Articles</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Humour</a></li> <li><a href="#">Gaming</a></li> <li><a href="#">Music</a></li> </ul> </nav> </li> <li><a href="#">Forum</a></li> <li><a href="#">Help</a></li> </ul> </nav> </div> </header>