jQuery的事件

jQuery中使用.on()方法来处理事件. 具体可以看之前写的jQuery基本知识

 

可折叠面板

页面上有3个li, 在默认状态下是折叠起来的(图1)

jquery折叠式菜单 jq 折叠面板_JavaScript

在点击之后, 面板展开, 再次点击的时候, 面板收起

jquery折叠式菜单 jq 折叠面板_jquery折叠式菜单_02

 

HTML部分代码

1  <body>
 2 
 3     <header><h1>Monsieur Pigeon</h1></header>
 4 
 5     <section class="page">
 6       <ul class="accordion" id="accordion">
 7         <li>
 8           <button class="accordion-control">Classics</button>
 9           <div class="accordion-panel">
10             <p>If you like your flavors traditional, Monsieur Pigeon's classic marshmallows won't disappoint. With luxuriously <strong>Velvety Vanilla</strong>, <strong>Charming Chocolate</strong>, and <strong>Sumptuous Strawberry</strong>, the favorites you love are treated with the respect and dignity they deserve!</p>
11           </div>
12         </li>
13         <li>
14           <button class="accordion-control">The Flower Series</button>
15           <div class="accordion-panel">
16             <p>Take your tastebuds for a gentle stroll through an English garden filled with Monsieur Pigeon's beautifully fragrant Flower Series marshmallows. With three sweetly floral options: <strong>Elderberry</strong>, <strong>Rose Petal</strong>, and <strong>Chrysanthemum</strong> - all edible and all naturally flavored - they will have you dreaming of butterflies and birdsong in no time.</p>
17           </div>
18         </li>
19         <li>
20           <button class="accordion-control">Salt o' The Sea</button>
21           <div class="accordion-panel">
22             <p>Ahoy! If you long for a taste of organic sea salt mixed in with your sweet Monsieur Pigeon marshmallows, look no further than our Salt o' the Sea range. Featuring two delicious flavors: <strong>Salted Caramel</strong> and <strong>Cashew Butter</strong>, this sweetly salty duo will expand your taste horizons.</p>
23           </div>
24         </li>
25       </ul>
26     </section>
27 
28 
29   </body>

 

 

jQuery实现

在这里使用了事件委托机制.

在.accordion-control的公共父元素accordion上绑定了click事件, 利用DOM事件冒泡机制来统一委托处理.

当出发了某个元素的click事件, JS会一次通知该元素及其父元素...知道最顶部的document对象位置.
如果这些元素上绑定了click事件处理函数, 就会依次执行.
在本例中, 事件委托机制就是, 不为每个button元素直接绑定click事件处理函数, 而是委托给ul元素, '告诉'他: 如果收到了click
事件触发匿名函数, 并且这个click事件时有这些button元素其中之一触发的, 就执行祖辈元素上委托绑定的事件处理函数.

1 $('.accordion').on('click', '.accordion-control', function(e){ // When clicked
2   e.preventDefault();                    // Prevent default action of button
3   //console.log($(this).attr('class'));
4   $(this)       // Get the element the user clicked on  这里的this指向触发click事件的accordion-control类(可以从上一句console得知)
5     .next('.accordion-panel')            // Select following panel
6     .not(':animated')                    // If it is not currently animating
7     .slideToggle();                      // Use slide toggle to show or hide it
8 });