アコーディオンドロップダウンメニューケース

ケーススタディ：

（1234見出し）スパンをクリックして、divの下に下にスライドします

隠されたdiv要素の他のスパン

次の兄弟がnextElemenetSibling、ショーの現在の兄弟のdivスパンように、すべての登録されたイベントにスパンをクリックします。

キーコード

$（関数（）{ 
   $（" .groupTitle " ）.click（関数（）{
      $（この）.next（）。slideDown（500）.parent（）。SIBLINGS（）。子供（" DIV "）.slideUp （500 ）;   //チェーンプログラム、 jQueryのメソッドは、常にそれを呼び出すことができています。

}）}）

完全なコード：

<！DOCTYPE HTML> 
<HTML LANG = " EN " > 
<HEAD> 
  <メタ文字コード= " UTF-8 " > 
  <タイトル> </ TITLE> 
  <スタイルタイプ= " テキスト/ cssの" > 
    * { 
        パディング：0 ; 
        マージン：0 ; 
      } 
    UL { 
       リスト -style- 種類：なし。
       } 
    
    .parentWrap { 
      幅：200pxの。
      テキスト - 揃える：センター; 
      マージン：100pxに自動; 
    }
     
    。
      国境：1pxの固体＃ > </ SCRIPT>999 ; 
      背景 - 色：＃1 e0ecff。
    } 
    
    .groupTitle { 
      表示：ブロック; 
      高さ：20ピクセル; 
      行 - 高さ：20ピクセル; 
      フォント - サイズ：16pxに; 
      国境 - 下：1pxの固体#CCC。
      カーソル：ポインタ; 
    } 
    
    .menuGroup > DIV { 
      高さ：200pxの。
      背景 - 色：#FFF; 
      表示：なし; 
    }
  
   </スタイル> 
  
  <スクリプトSRC = " jqueryの-1.12.4.min.js " 
  <script> 
      $（関数（）{
          // アイデア分析：
           // 登録されているすべてのスパンのクリックイベントを1に、現在の兄弟のdivスパンが表示されてみましょう 
          $（「.groupTitle 」）.click（関数（）{
             // 次の兄弟：nextElementSibling 
            
            // チェーンプログラミング：内部jQueryのでは、あなたは常にメソッドを下に呼び出すことができます。 
            $（この）.next（）slideDown（500）.parent（）SIBLINGS（）子供（.. " DIV "）.slideUp（500 ）; 
          }）; 
      } ）;
   </ SCRIPT> 
</ head> 
<body> 
<ULのクラス = " parentWrap "> "
  <LIのクラス = MENUGROUP " > 
    <スパンクラス = " grouptitle " >タイトル1 </ span>の
    <div>の私は、ポップアップにDIV1 </ div>のだ
  。</ LI> 
  <LIのクラス = " MENUGROUP " > 
    <スパンクラス = " grouptitle " >タイトル2 </ span>の
    <div>の私はDIV2 </ div>のポップアップし
  ます。</ li> 
  <LIのクラス = " MENUGROUP " > 
    <スパンクラス = " groupTitle " >标题3 </ span>の
    <div>私はDIV3 </ div>のポップアップし
  ます。</ li> 
  <LIをクラス = " MENUGROUP " > 
    <スパンクラス = " grouptitle " >タイトル4 </ span>の
    <divの私はDIV4をポップアップ> </ div> 
  </ LI> 
</ UL> 
</ BODY> 
</ HTML>

アコーディオンドロップダウンメニューケース

おすすめ