드롭다운 메뉴 heart_jquery의 jquery 구현을 공유하세요.

요약:

jquery 라이브러리는 우리에게 많은 편의를 제공했습니다. jquery를 사용하여 간단한 드롭다운 메뉴를 구현하는 것은 매우 간단하지만 구현 방법도 다릅니다. 오늘은 jquery를 사용하여 Xiaofeng Wang의 SexDropDownMenu2010을 참조하여 기록할 가치가 있는 내용을 작성했습니다.

구현:

먼저 코드를 올려주세요. (코드 전체를 올리기엔 너무 길기 때문에 일부만 골라 올리세요.)

　1. html로 된 ul 목록

 <ul class="topmenu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Tutorials</a>
        <ul class="submenu1">
          <li><a href="#">Ch1</a></li>
          <li><a href="#">Ch2</a>
            <ul class="submenu11">
              <li><a href="#">Ch21</a>
                <ul class="submenu11">
                  <li><a href="#">Ch211</a>
                    <ul class="submenu11">
                      <li><a href="#">Ch2111</a>
                        <ul class="submenu11">
                          <li><a href="#">Ch21111</a></li>
                          <li><a href="#">Ch21112</a></li>
                          <li><a href="#">Ch21113</a></li>
                          <li><a href="#">Ch21114</a></li>
                          <li><a href="#">Ch21115</a></li>
                          <li><a href="#">Ch21116</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Ch2112</a></li>
                      <li><a href="#">Ch2113</a></li>
                      <li><a href="#">Ch2114</a></li>
                      <li><a href="#">Ch2115</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Ch212</a></li>
                  <li><a href="#">Ch213</a></li>
                  <li><a href="#">Ch214</a></li>
                </ul>
              </li>
              <li><a href="#">Ch22</a>
                <ul class="submenu11">
                  <li><a href="#">Ch221</a></li>
                  <li><a href="#">Ch222</a></li>
                  <li><a href="#">Ch223</a></li>
                </ul>
              </li>
              <li><a href="#">Ch23</a></li>
            </ul>
          </li>
          <li><a href="#">Ch3</a>
            <ul class="submenu11">
              <li><a href="#">Ch31</a></li>
              <li><a href="#">Ch32</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Resources</a>
        <ul class="submenu1">
          <li><a href="#">Sub Nav Link</a></li>
          <li><a href="#">Sub Nav Link</a></li>
        </ul>
      </li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Advertise</a></li>
      <li><a href="#">Submit</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>

아래와 같이 6단계 메뉴 구조입니다

　2.js 부분(css는 게시되지 않습니다.)

$(document).ready(function() {
  //第一部分
  // Top Menu
  //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.submenu1*)
  $("ul.submenu1").parent().append("<span></span>"); 
  //第二部分
  $("ul.topmenu li span").click(function() { //When trigger is clicked...
    //Following events are applied to the submenu1 itself (moving submenu1 up and down)    
    //Drop down the submenu1 on click
    $(this).parent().find("ul.submenu1").slideDown('fast').show();   
    //在click后给绑定hover处理函数，感觉是比较巧妙的地方
    $(this).parent().hover(function() {
    }, function() {
      //When the mouse hovers out of the submenu1, move it back up
      $(this).parent().find("ul.submenu1").slideUp('slow'); 
    });
    //Following events are applied to the trigger (Hover events for the trigger)
  }).hover(function() {
    //On hover over, add class "hover"
    $(this).addClass("hover"); 
  }, function() {  //On Hover Out
    //On hover out, remove class "hover"
    $(this).removeClass("hover"); 
  });
  //第三部分
  $("ul.topmenu li ul.submenu1 li").hover(function() {
    $(this).find("ul.submenu11:first").show("slow");
  }, function() {
    $(this).find("ul.submenu11:first").hide("fast");
  });
})；

1부:

메뉴 아래에 트리거 버튼을 추가했습니다

2부:

클릭 이벤트에 대한 핸들러 함수 바인딩

트리거 버튼을 클릭한 후 호버 처리 기능이 드롭다운 메뉴의 가장 바깥쪽 li에 바인딩되는데, 이는 매우 영리한 느낌을 줍니다.

호버 기능을 가장 바깥쪽의 li에 바인딩합니다. 여기서 처리 기능은 li 위에 마우스를 올리면 처리가 수행되지 않고(첫 번째 기능은 비어 있음) 마우스가 떠날 때 li가 닫히도록 작성되었습니다.

이렇게 하면 나중에 ul을 확장하는 메뉴가 가장 바깥쪽의 li 안에 들어가게 되어 메뉴가 자동으로 닫히지 않게 되는데, 이는 마우스가 전체 메뉴를 벗어나면 li가 자동으로 닫히게 된다는 뜻입니다.

3부:

메뉴 아래에 중첩된 ul의 hover 이벤트에 함수를 바인딩하여 다음 레벨 메뉴를 확장 및 축소합니다

$(this).find("ul.submenu11:first")는 find를 통해 현재 일치하는 요소 집합에서 각 요소의 자손을 얻고 "ul.submenu11: 먼저" 확장하세요.

동시에 다음 단계 메뉴에도 축소 처리 기능이 바인딩되어 있는데, 이는 트리거 메뉴에서 클릭하여 가장 바깥쪽 li에 바인딩된 축소 기능과 함께 작동하는 메뉴의 자동 축소 기능입니다. .

요약:

　jquery 필터의 강력함과 유연성을 보여주며 jquery의 아름다운 체인 구문도 반영합니다.

순수한 jQuery 수평 드롭다운 메뉴 구현을 공유하겠습니다

<!DOCTYPE html>
<html>
  <head>
   <title>jQuery水平下拉菜单实现</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" >
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="bootstrap/js/jquery-1.11.1.min.js"></script>
   <!--[if lt IE 9]>
     <script src="bootstrap/js/html5shiv.js"></script>
     <script src="bootstrap/js/respond.min.js"></script>
   <![endif]-->
   <style type="text/css">
 .menus{border:1px solid red; float:left; margin-left:4px; background:red;}
 .menus a{display:block; width:100px; text-align:center;}
 .menu{display:none;}
 a{cursor:pointer;text-decoration:none;}
 a:hover{background:white; text-decoration:none;}
 a:visited{text-decoration:none; color:black;}
  </style>
   <script>
    $(function(){
 $(".menu-title").click(function(){
 $(this).next().toggleClass();
 });
    });
   </script>
  </head>
  <body> 
   <div class="menus">
    <a class="menu-title">菜单项</a>
    <div class="menu">
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
    </div>
   </div> 
   <div class="menus">
    <a class="menu-title">菜单项</a>
    <div class="menu">
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
    </div>
   </div> 
   <div class="menus">
    <a class="menu-title">菜单项</a>
    <div class="menu">
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
    </div>
   </div> 
   <div class="menus">
    <a class="menu-title">菜单项</a>
    <div class="menu">
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
     <a href="#" class="menu-item">菜单列表</a>
    </div>
   </div>
  </body>
</html>