个人中心
gpt4 book ai didi

javascript - 我的下拉菜单的最后一部分

转载 作者：行者123 更新时间：2023-12-02 19:06:56 24 4
gpt4 key购买 nike

好的，感谢这里的人们，我几乎已经完成了 3 岁 child 标准的下拉菜单。我知道可能有一种方法可以缩短和简化我的代码，因此任何指针都会很棒。这是我的所有代码，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

最佳答案

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

这是更新的 fiddle :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 标记提供了一个名为“slide”或类似的类，您就可以重写事件回调以首先隐藏/滑动属于当前单击的同级菜单的所有子菜单一个标签。之后，您触发slideToggle()来显示或隐藏当前子菜单。这样，如果您首先单击“关于”，然后在不再次单击“关于”(并触发切换)的情况下单击“工作”，则子菜单会正确更改。

关于javascript - 我的下拉菜单的最后一部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14226700/

24 4 0
文章推荐： Javascript 正则表达式表示年份
文章推荐： logging - 监控负载下的 log4j 行为
文章推荐： .net-core - Cake 命令 DotNetCoreTool 在构建服务器上失败并显示 "No executable found matching command"
文章推荐： javascript - 有没有更好的方法来重复一个函数，而不是使用 setTimeout
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com