0

好的，多亏了这里的人，我几乎完成了我的下拉菜单，达到了 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

4

2 回答 2

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);
        }
   });
});
于 2013-01-09T01:21:26.673 回答
1

一方面，您应该使用 CSS 类而不是 ids 来a触发它们各自子菜单上的 slideToggle 的标签。此外，有效 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);
  });

Once you give the a tags a class called "slide" or similar, you can rewrite your event callback to first hide / slideUp all the submenus belonging to the siblings of the currently clicked a tag. After that, you trigger the slideToggle() to show or hide the current submenu. That way, if you first click on ABOUT and then without clicking on ABOUT again (and triggering the toggle) you click on WORK for instance, then the submenu changes correctly.

于 2013-01-09T01:47:47.400 回答