Heim > php教程 > PHP开发 > Hauptteil

Von jQuery implementierter Navigations-Dropdown-Menüeffekt

高洛峰
Freigeben: 2016-12-15 16:04:42
Original
1445 Leute haben es durchsucht

Der Effekt ist wie im Bild gezeigt:

Von jQuery implementierter Navigations-Dropdown-Menüeffekt

HTML-Code:

<div id="navigation">
 <ul>
   <li><a href="#">首 页</a></li>
   <li><a href="#">衬 衫</a>
    <ul>
      <li><a href="#">短袖衬衫</a></li>
      <li><a href="#">长袖衬衫</a></li>
      <li><a href="#">无袖衬衫</a></li>
    </ul>
  </li>
  <li><a href="#">卫 衣</a>
    <ul>
      <li><a href="#">开襟卫衣</a></li>
      <li><a href="#">套头卫衣</a></li>
    </ul>
   </li>
  <li><a href="#">裤 子</a>
    <ul>
      <li><a href="#">休闲裤</a></li>
      <li><a href="#">卡其裤</a></li>
      <li><a href="#">牛仔裤</a></li>
      <li><a href="#">短裤</a></li>
    </ul>
   </li>
   <li><a href="#">联系我们</a></li>
 </ul>
</div>
Nach dem Login kopieren

jQuery-Code:

//导航效果(兼容IE6)
/*
1.使用$("#navigation ul li:has(ul)")函数来选择含有<ul>元素的<li>元素,然后为它们添加hover事件,
2.在hover事件的第一个函数内,使用$(this).children("ul")找到<li>元素内部的<ul>元素,然后用stop(true,true)语句使导航向下扩展
3.在hover事件的第二个函数内,用stop(true,true).slideUp("fast")语句使导航向上隐藏
4.在两个动画效果之前都添加了stop(true,true)方法,这样做的好处是能把为执行完的动画队列清空,并且将正在执行的动画跳转到末状态
*/
$(function(){
  $("#navigation ul li:has(ul)").hover(function(){
   $(this).children("ul").stop(true,true).slideDown(400);
  },function(){
   $(this).children("ul").stop(true,true).slideUp("fast");
  });
})
Nach dem Login kopieren


Weitere Artikel zum von jQuery implementierten Navigations-Dropdown-Menüeffekt finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!