Question

我已经建立了我的第一个真正的网站几天了，我解决了几个问题，但我现在卡在移动下拉菜单中。

我希望列表项在菜单中向下滑动，菜单的其余部分相应地滑动。



$(document).ready(function(){
    $("#li1").click(function(){
        $(".dd1").slideToggle("fast");
		$('.dd2').slideUp();
    });
		$("#li2").click(function(){
			$(".dd2").slideToggle("fast");
			$('.dd1').slideUp();
		});
			$('.bgOverlay').click(function () {
			  $('.dd1').slideUp();
			  $('.dd2').slideUp();
			  $('ul').slideUp();
			});	

});


$(document).ready(function(){
    $("#nav-toggle").click(function(){
        $("ul").slideToggle(1);
		$('.dd1').slideUp();
		$('.dd2').slideUp();
    });
});
.navbar {
  position: fixed;
  height: 3em;
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1;
}

.navbar ul {
  position: relative;
  display: none;
  top: 100%;
  right:-20%;
  height: 0;
  list-style: none;
  font-size: 160%;
}

.navbar ul li {
  position: relative;
  width: 60%;
  background-color: rgba(0,0,0,0.5);
  border-top: none;
  text-indent: 10px;
  color: gray;
  border-bottom: 1px solid rgba(254,254,254,0.1);
}

.navbar ul li:hover {
  background-color: rgba(0,0,0,0.6);
}

.navbar ul li a{
  text-decoration: none;
  color: rgba(254,254,254,1);
  font-weight: 100;
}	

.navbar ul ul ul, .navbar ul ul ul li {
  display: none;
}

.navbar ul ul, .navbar ul ul li {
  position: relative;
  font-size: 100%;
  background-color: rgba(0,0,0,0);
}


li:last-child {
  border-radius: 0px 0px 10px 10px;
}

li:first-child {
  border-top: 1px solid rgba(254,254,254,0.3);
}

.dd1 {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.dd1 li {
  font-size: 100%;
  background-color: rgba(0,0,0,0)
}

.dd2 {
  display: none;
  position: relative;
  width: 100%;
  height: 20%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1;
}

#nav-toggle { 
  position: absolute;
  right: 10px;
  top: 25%; 
}

#nav-toggle {
  cursor: pointer; 
  padding: 10px 35px 16px 0px;
  z-index: 5;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 3px;
  width: 35px;
  background: rgba(254,254,254,0.9);
  position: absolute;
  display: block;
  content: '';
  opacity: 0.9;
}

#nav-toggle span:before {
  top: -10px; 
}

#nav-toggle span:after {
  bottom: -10px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 500ms ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="navbar">
  <a id="nav-toggle"><span></span></a>
  <ul>
    <li id="li1"><a href="3d.html">3d printing</a>
      <ul>
        <div class="dd1">
          <li><a href="#">blueprints</a>
            <ul>
              <li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen\</li>
            </ul>
          </li>

          <li><a href="#">information</a>
            <ul>
              <li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis.</li>
            </ul>
          </li>

          <li class="noTransition"><a href="#">Software</a>
            <ul>
              <li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. </li>
            </ul>
          </li>
        </div>

      </ul>
    </li>

    <li id="li2"><a href="#">computing</a>
      <ul>
        <div class="dd2">
          <li><a href="#">hardware</a>
            <ul>
              <li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu.</li>
            </ul>
          </li>

          <li><a href="#">information</a>
            <ul>
              <li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis.</li>
            </ul>
          </li>

          <li class="noTransition"><a href="#">software</a>
            <ul>
              <li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. </li>
            </ul>
          </li>
        </div>	
      </ul>
    </li>

    <li><a href="#">virtual</a></li>
  </ul>
</div>

Answer 1

尝试使用以下更新的代码，它可能对您有所帮助。

＆＃13;

STM

＆＃13;

retry

＆＃13;

$("#nav-toggle").click(function(){
  event.preventDefault();
  $("#dropMenu").toggle();
})
$(".level1-menu > li > a").on("click",function(){
  event.preventDefault();
  $(this).siblings(".level2-menu").toggle(".level2-menu");
});
$(".level2-menu > li > a").on("click",function(){
  event.preventDefault();
  $(this).siblings(".level3-menu").toggle(".level3-menu");
});

＆＃13;

移动下拉菜单滑落

1 个答案: