下拉菜单的最后一部分

时间：2013-01-09 00:58:56

标签： javascript drop-down-menu

好的，谢谢这里的人们，我几乎完成了我对3岁儿童的标准下降。我知道有可能缩短和简化我的代码，所以任何指针都会很棒。这是我的所有代码，jsfiddle将位于底部：

哦，在我忘记之前有没有办法可以让动画变得平滑？像wait（）那样会让滑动等待直到滑动完成的交易？ 

<!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"/>
<script type="text/javascript">
$(document).ready(function () {

$('a#1').on('click', function (event) {
    event.preventDefault();
    if ($('#mid-nav > ul').find('ul').is(":visible")) {
        $('#mid-nav > ul').find('ul').slideUp(300);
    }
    if ($('#mid-nav > ul').find('ul#1').is(":visible")) {
        $('#mid-nav > ul').find('ul').slideUp(300);
    } else {
        $('#mid-nav > ul').find('ul#1').slideToggle(300);
    }
});
$('a#2').on('click', function (event) {
    event.preventDefault();
    if ($('#mid-nav > ul').find('ul').is(":visible")) {
        $('#mid-nav > ul').find('ul').slideUp(300);
    }
    if ($('#mid-nav > ul').find('ul#2').is(":visible")) {
        $('#mid-nav > ul').find('ul').slideUp(300);
    } else {
        $('#mid-nav > ul').find('ul#2').slideToggle(300);
    }
});
$('a#3').on('click', function (event) {
    event.preventDefault();
    if ($('#mid-nav > ul').find('ul').is(":visible")) {
        $('#mid-nav > ul').find('ul').slideUp(300);
    }
    if ($('#mid-nav > ul').find('ul#3').is(":visible")) {
        $('#mid-nav > ul').find('ul').slideUp(300);
    } else {
        $('#mid-nav > ul').find('ul#3').slideToggle(300);
    }
});
$('a#4').on('click', function (event) {
    event.preventDefault();
    if ($('#mid-nav > ul').find('ul').is(":visible")) {
        $('#mid-nav > ul').find('ul').slideUp(300);
    }
    if ($('#mid-nav > ul').find('ul#4').is(":visible")) {
        $('#mid-nav > ul').find('ul').slideUp(300);
    } else {
        $('#mid-nav > ul').find('ul#4').slideToggle(300);
    }
});

}）;          

<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="#" >HOME</a></li>
          <li><a id="1" href="#" >ABOUT</a>
            <ul id="1">
              <li><a href="#">test1.2</a></li>
              <li><a href="#">test1.3</a></li>
              <li><a href="#">test1.1</a></li>
            </ul>
          </li>
          <li><a id="2"href="#">Work</a>
            <ul id="2">
              <li><a href="#">test1x.2</a></li>
              <li><a href="#">test1x.3</a></li>
              <li><a href="#">test1x.1</a></li>
            </ul>
          </li>
          <li><a id ="3" href="#">Clients</a>
            <ul id="3">
              <li><a href="#">test2.2</a></li>
              <li><a href="#">test2.3</a></li>
              <li><a href="#">test1.2</a></li>
            </ul>
          </li>
          <li><a id="4"href="#">Contact</a>
            <ul id="4">
              <li><a href="#">test3.2</a></li>
              <li><a href="#">test3.3</a></li>
              <li><a href="#">test3.1</a></li>
            </ul>
          </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:

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:100%;
 height:40px;
 background: #fff;
    border-bottom: solid thin #c8c8c8;



}


/* 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 *?

http://jsfiddle.net/XN4vf/

很抱歉，如果它像傻瓜一样编码（我还在使用我的训练轮）。

谢谢

C

2 个答案:

答案 0 :(得分：1)

你可以试试这个：

$(document).ready(function () {
    $('#midnav li a').on('click', function(event){
        event.preventDefault();
        $('#midnav li ul').slideUp(300);
        var ul = $(this).parent().find('ul');
        if(ul.is(':visible')){
            ul.slideUp(300);
        }else{
            ul.slideDown(300);
        }
   });
});

答案 1 :(得分：1)

首先，对于在各自子菜单上触发slideToggle的a标记，您应该使用CSS类而不是ID。此外，有效HTML页面中的ID应该是唯一的，并且对于不同的元素使用相同的id“1”，“2”等。更重要的是，通过使用类，您不需要单独绑定所有锚标记的onclick事件，这样可以节省大量代码; - ）

这是更新的小提琴：http://jsfiddle.net/XN4vf/3/

相关代码如下：

  $("a.slide").on('click', function(e){
   e.preventDefault();
   $(this).parent().siblings().find("ul:visible").slideUp();
   $(this).next("ul").slideToggle(300);
  });

一旦为a标签提供了一个名为“幻灯片”或类似的类，您就可以重写事件回调以首先隐藏/滑动所有属于当前点击的标签兄弟姐妹的子菜单< / strong>即可。之后，您触发slideToggle()以显示或隐藏当前子菜单。这样，如果您首先单击ABOUT然后再单击ABOUT（并触发切换），则单击WORK，然后子菜单会正确更改。

相关问题
最新问题