Shulou(Shulou.com)05/31 Report--

This article editor for you detailed introduction of "jquery how to achieve simple drop-down menu effect", the content is detailed, the steps are clear, the details are handled properly, I hope this "jquery how to achieve simple drop-down menu effect" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Look at the effect.

Html

Theme market campaign three-level menu a three-level menu b three-level menu c three-level menu d car family three-level menu Level 4, level 3, life, characteristic shopping, Taobao second-hand auction, shopping. Global purchase of Taobao girls discount promotion daily special price free trial clearance tools starting with 1 yuan

Simply set up css

Ul li {list-style: none;} li ul {display: none;} .plus {list-style-image: url (img/plus.gif);} .minus {list-style-image: url (img/minus.gif);}

Js code

(function () {/ / add an icon to the li with ul (add class name) $("li:has (ul)") .addClass ("plus") / / add a click event. Click (function (e) {/ / see if the li (event source) directly clicked has a child element if ($(e.target). Children ( ) .length) {$(this) .children () .slideToggle () $(this) .toggleClass ("minus");} e.stopPropagation (); / / prevent event bubbles to animate only the current layer);}) After reading this, the article "how to achieve simple drop-down menu effect in jquery" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.