JS下拉菜单

Question

Ok, so I know that this seems like I am just being lazy but I am so close to ripping out all of my hair! 好的，所以我知道这似乎只是在偷懒，但我非常接近撕掉我所有的头发！ I have trawled through so many websites and after 24 hours need help from the Stack! 我已经浏览了这么多网站，24小时后需要堆栈的帮助！

I am trying to make a dropdown menu that when a level 1 parent is CLICKED all of its children appear below pushing the page content down and when the next level 1 parent is clicked the previous children disappear and the new ones come in. 我正在尝试制作一个下拉菜单，当1级父级被点击时，其所有子级都显示在向下推送页面内容下方，当单击下一级1父级时，之前的子级消失，新的子级进入。

From my research I know that I need to utilize toggle but I have confused the hell out of myself and I am not much of a JS guy. 根据我的研究，我知道我需要利用切换，但我已经把自己弄得很困惑，而且我不是一个JS家伙。 I am also aware that I will need to use overflow hidden in my css for the midnav. 我也知道我需要使用隐藏在我的CSS中的溢出来进行midnav。 I would also like to use some of the jQuery effects to slide the children ul up and down, would this mean I would have to write the whole thing using jQuery? 我还想使用一些jQuery效果来上下滑动孩子ul，这是否意味着我必须使用jQuery编写整个东西？

Any help would be greatly appreciated. 任何帮助将不胜感激。 an example of what I want to do is here at 我想做的一个例子是在这里

http://www.andersenwindows.com/ http://www.andersenwindows.com/

and here is what I have so far: HTML: 这是我到目前为止：HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript" src="js/formhandler.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
<link href="CSS/style.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="CSS/fonts.css" rel="stylesheet" type="text/css" media="screen"/>
</head>

<body>
<div id="wrapper">
  <div id="topbanner"></div>
  <div id="header">
    <div id="navigation">
      <div id="topnav">
        <div id="left-side">
          <div id="left-menu">
            <ul>
              <li><a href="#">Link l1</a></li>
              <li><a href="#">Link l2</a></li>
            </ul>
          </div>
        </div>
        <div id="logo"><img src="images/general/nav_logo.png" /> </div>
        <div id="right-side">
          <div id="right-menu">
            <ul>
              <li><a href="#">Link r1</a></li>
              <li><a href="#">Link r2</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div id="mid-nav">
        <ul id="midnav">
          <li><a href="#" >About</a></li>
          <li><a href="#" >Home</a> 
          <ul>
          <li><a href="#">test2</a></li>
          <li><a href="#">test3</a></li>
          <li><a href="#">test1</a></li>
          </ul>
          </li>
          <li><a href="#">Work</a></li>
          <li><a href="#">Clients</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
    <!--START 100% HERE!--> 
  </div>
</div>
<div id="footer">
  <div class="social-images"><img src="images/socialmedia/facebook.gif" height="40" width="40"/></div>
  <div class="social-images"><img src="images/socialmedia/google.gif" height="40" width="40"/></div>
  <div class="social-images"><img src="images/socialmedia/twitter.gif" height="40" width="40"/></div>
</div>
</body>
</html>

CSS: CSS：

html, body {
    height: 100%;
    margin: 0 auto;
}
/* NAVIGATION */
#wrapper {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}

#topbanner{
    width:100%;
    height:54px;
    background-color:#f1f2f2;
    position:absolute;
    z-index:-1000;
}

#topnav {
    margin: 0px auto;
    width: 1050px;
    height: 50px;
    padding-top: 4px;
    background-color: #f1f2f2;
}

#left-side {
    float: left;
    width: 439px;
}
#right-side {
    float: right;
    width: 439px;
}
#logo {
    padding-top: 7px;
    float: left;
    width: 15%;
}
#left-menu {
}
#left-menu ul {
    float: right;
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px 0px;
}
#left-menu li {
    display: inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
#left-menu a {
    display: inline-block;
    padding: 10px;
    line-height: 30px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'AftasansRegular';
    font-size: 22px;
    font-weight: normal;
    color: #000;
    border: none;
}
#right-menu {
}
#right-menu ul {
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 10px;
}
#right-menu li {
    display: inline;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
#right-menu a {
    display: inline-block;
    padding: 10px;
    line-height: 30px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'AftasansRegular';
    font-size: 22px;
    font-weight: normal;
    color: #000;
    border: none;
}
ul#midnav {
    border-width: 1px 0;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    border-bottom: solid thin #c8c8c8;
}
ul#midnav li {
    display: inline;
}
ul#midnav li a {
    display: inline-block;
    padding: 10px;
    line-height: 30px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'AftasansRegular';
    font-size: 18px;
    font-weight: normal;
    color: #000;
    border: none;
}
ul#midnav li ul{
line-height: 30px;
 padding: 0;
 position: absolute;
 left: 0; top:100px;
 display: none;/* --Hide by default--*/
 width: 970px;
 height:40px;
 background: #f1f2f3;
 color: #fff;


}


/* NAVIGATION END */
/* FOOTER BEGIN */
#footerwrapper, #push {
    height: 100px; /* .push must be the same height as .footer */
    background-color: #f1f2f2;
}
#footer {
        border-top: solid thin #c8c8c8;
    width: 100%;
    height: 100px;
    margin: 0 auto;
    background-color: #f1f2f2;
}
#social-wrapper {
    width: 130px;
    height: 100px;
    float: right;
    position: relative;
    top: 40px;
}
.social-images {
    border-style: solid;
    border-width: 1px;
    border-color: #f1f2f2;
    width: 40px;
    height: 40px;
    float: left;
}
/*FOOTER END *?

Thanks, 谢谢，

C C

Answer 1

I got lost with all the left/right nav stuff so I just did one with the middle nav. 我迷失了所有左/右导航的东西，所以我只用中间导航做了一个。 You can think of it as a jumping off point. 你可以把它想象成一个跳跃点。 http://jsfiddle.net/MatthewDavis/4syjv/ http://jsfiddle.net/MatthewDavis/4syjv/

Here's the JS... it's pretty generic but you should be able to edit to suit. 这是JS ......它非常通用，但你应该能够编辑以适应。

$(document).ready(function () {
  $('a').on('click', function(event){
    event.preventDefault();
    $('#mid-nav > ul').find('ul').slideUp(
      function(){
        $(this).closest('li').find('ul').slideToggle();
    });
  });
});

Answer 2

Are you looking for something like: 你在寻找类似的东西：

 $('#div1').click(function() {
      if( /* check if already visible */)
      $('div1').toggle(); //also do-able with $('div1').slideToggle();
      $('div2').hide();
 }

but first you would hide all your divs first and check the current div 但首先你要先隐藏所有的div并检查当前的div

JS下拉菜单

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-01-08 22:30:01

解决方案2
1 2013-01-08 22:31:29

JS下拉菜单

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-01-08 22:30:01

解决方案2 1 2013-01-08 22:31:29

解决方案1
1 已采纳 2013-01-08 22:30:01

解决方案2
1 2013-01-08 22:31:29