Accordion drop-down menu Case

case analysis:

Click the span (heading 1234), will slide down below the div

Other span of hidden div

Click on the span to all registered event, so that the current brothers div span of the show, the next sibling nextElemenetSibling

Key Code

$ (function () { 
   $ ( " .groupTitle " ) .click (function () {
      $ ( the this ) .next (). slideDown ( 500 ) .parent (). SIBLINGS (). Children ( " div " ) .slideUp ( 500 );   // chain program, in which jQuery method can always call it.

}) })

Complete code:

<!DOCTYPE html>
<html  lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
        padding: 0;
        margin: 0;
      }
    ul {
       list-style-type: none;
       }
    
    .parentWrap {
      width: 200px;
      text-align:center;
      margin:100px auto;
    }
    
    .menuGroup {
      border:1px solid #999;
      background-color:#e0ecff;
    }
    
    .groupTitle {
      display:block;
      height:20px;
      line-height:20px;
      font-size: 16px;
      border-bottom:1px solid #ccc;
      cursor:pointer;
    }
    
    .menuGroup > div {
      height: 200px;
      background-color:#fff;
      display:none;
    }
  
  </style>
  
  <script src="jquery-1.12.4.min.js"></script>
  <Script> 
      $ (function () { 
          // ideas Analysis:
           // 1. to all the registered span click event, let the brothers div span of the current displayed 
          $ ( " .groupTitle " ) .click (function () {
             // next sibling: nextElementSibling 
            
            // chain programming: in jQuery inside, you can always call down method. 
            $ ( the this ) .next () slideDown (. 500 ) .parent () SIBLINGS () Children (.. " div " ). slideUp ( 500 ); 
          }); 
      });
   </ Script> 
</ head> 
<body> 
<UL class = " parentWrap ">
  <li class = MENUGROUP " > 
    <span class = " grouptitle " > Title 1 </ span> 
    <div> I am a pop-up to div1 </ div> 
  </ li> 
  <li class = " MENUGROUP " > 
    <span class = " grouptitle " > title 2 </ span> 
    <div> I pop up div2 </ div> 
  </ li> 
  <li class = " MENUGROUP " > 
    <span class="groupTitle">标题3</span> "
    <div> I pop up div3 </ div> 
  </ li> 
  <liclass = " MENUGROUP " > 
    <span class = " grouptitle " > Title 4 </ span> 
    <div> I pop up DIV4 </ div> 
  </ li> 
</ ul> 
</ body> 
</ HTML>

Accordion drop-down menu Case

Guess you like