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

a1つには、それぞれのサブメニューで slideToggle をトリガーするタグの ID の代わりに CSS クラスを使用する必要があります。また、有効な HTML ページの ID は一意であることが期待され、異なる要素に対して同じ ID「1」、「2」などを使用します。さらに重要なのは、クラスを使用することで、すべてのアンカー タグの 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()を表示または非表示にします。そうすれば、最初に ABOUT をクリックし、次に ABOUT を再度クリックせずに (トグルをトリガーせずに)、たとえば WORK をクリックすると、サブメニューが正しく変更されます。

于 2013-01-09T01:47:47.400 に答える
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 に答える