将向下滑动效果添加到响应式导航菜单中

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>（可以用查找子导航替换）
• [将切换按钮添加到Click（可以将鼠标悬停替换）希望对您有所帮助

更新2：-将$("header > div#bottom-container > nav > ul > li").mouseenter(function(e) {更改为针对li而不是-添加了$("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>