

jQueryを用いたアコーディオンメニューを作るにあたり、  
任意の一つを最初から開いた状態でスタートさせるには、どのようにコーディングをすればよろしいでしょうか。

以下のようなコーディングを用いています。

【html】

[code]

    <div id="side">
      <div id="recent-posts-3" class="widget widget_recent_entries">
        <div class="side_d">
          <div class="side_box">
            <h3>2017年度</h3>
            <ul>
              <li>メニュー</li>
              <li>メニュー</li>
              <li>メニュー</li>
              <li>メニュー</li>
              <li>メニュー</li>
              <li>メニュー</li>
            </ul>
          </div>
        </div>
      </div>
      <div id="category-4" class="widget widget_category">
        <div class="side_d">
          <div class="side_box">
            <h3>カテゴリー</h3>
            <ul>
              <li>カテゴリー1</li>
              <li>カテゴリー2</li>
              <li>カテゴリー3</li>
              <li>カテゴリー4</li>
            </ul>
          </div>
        </div>
      </div>
      <div id="meta-2" class="widget widget_meta">
        <div class="side_d">
          <div class="side_box">
            <h3>メタ情報</h3>
            <ul>
              <li>ログイン</li>
              <li>RSS</li>
              <li>WordPress.org</li>
              <li>--------</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    
[/code]

【css】

[code]

    #side {
      width:100%;
      padding:5px 5px 5px 10px ;
      margin:0px 0 0 0;
      background-color:#F0F0F0;
    }
    
    #side .widget div .side_box{
      margin:5px 0 5px 0;
    }
    
    #side .widget div .side_box h3{
      width:99%;
      margin:1px 1px 0px 1px;
      padding:10px 0 10px 20px;
      line-height:25px;
      color:#FFFFFF;
      font-size:16px;
      background-color:#888888;
      box-sizing: border-box;
    }
    
    #side .widget div .side_box h3.wp-accordion{
      background-color:#999;
    }
    
    /* arrow */
    #side .widget div .side_box h3.arrow{
      background-color:#BBBBBB;
      cursor:pointer;
    }
    
    #side .widget div .side_box h3.opend{
      cursor:default;
    }
    
    /* active */
    #side .widget div .side_box h3.active {
      background-color:#FF8856;
      color:#fff;
    }
    
    /* hovered */
    #side .widget div .side_box h3.hovered {
      background-color:#DAA520;
    }
    
    #side .widget div .side_box ul {
      display:block;
      list-style:none;
      width:auto;
      height:100%;
      margin:0 10px 0 1.8px;
      padding:0 0px 0 10px;
      background-color:#FFFFFF;
    }
    
    #side .widget div .side_box ul li{
      list-style:none;
      width:96%;
      height:16px;
      margin-left:5px;
      padding:10px 0 10px 35px;
      border-bottom:1px #EEEEEE solid;
      line-height:16px;
      font-size:15px;
      color:#555555;
      position:relative;
    }
    
    #side .widget div .side_box ul li:before{
      counter-increment: list;
      content: "";
      display: block;
      position: absolute;
      left: 2px;
      height: 15px;
      width: 15px;
      border-radius: 50%;
      background: #F6A38B;
      top: 50%;
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }
    
    #side .widget div .side_box ul li:after{
      content: "";
      display: block;
      position: absolute;
      left: 8px;
      height: 0;
      width: 0;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      border-left: 5px solid #fff;
      top: 50%;
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }
    
    #side .widget div .side_box ul li a {
      text-decoration:none;
      color:#666;
    }
    
[/code]

【jQuery】

[code]

    (function($){
      $(function(){
        //速度
        var slide_speed=400;
        var keep_openItem;
    
        //MENUブロック指定クラス名付加
        var accord=$('#recent-posts-3,#category-4,#meta-2').find('h3').addClass("wp-accordion");
    
        var accord_itme=$('.wp-accordion');
        accord_itme.css({'cursor':'pointer'});
        accord_itme.next().hide();
    
        //click-action
        $('.wp-accordion').click(function(){
          //hit判定クラス
          $(this).toggleClass("active");
          var slideItem=$(this).next();
    
          //hit分岐処理
          if ($(this).hasClass('active')){
            //開いていればさきに閉じる
            if(keep_openItem) {
              keep_openItem.slideUp(slide_speed,function(){
                //activeクラス切り替
                keep_openItem.prev().removeClass("active");
              });
            }
    
            //開く
            slideItem.slideToggle(slide_speed,function(){
              //openItem保存
              keep_openItem=slideItem;
            });
          }
    
          if (!$(this).hasClass('active')){
            //閉じる
            slideItem.slideToggle(slide_speed);
            //openItemクリア
            keep_openItem=null;
          }
        });
      });
    })(jQuery)
    
[/code]


CC BY-SA 3.0
2017-09-13T00:38:33.257
37905
2018-02-21T17:30:23.443
2017-09-13T03:01:21.537
2383
25352
question
jquery
jQueryによるアコーディオンメニューの作成【任意のひとつを開いた状態からスタートしたい】


`accord_itme.next().hide();`にて非公開にしているので  
・再度公開に直す  
・wp-accordionにactiveクラスを付与する  
・現在開いているitemを保持する変数に代入する  
の3つをやれば可能です。  
以下の例では最初の要素を公開するようにしましたが、  
任意のselectorに変更してください。idとかの指定でもいいと思います。

[code]

    (function($){
    $(function(){
    
        //速度
        var slide_speed=400;
        var keep_openItem;
    
        //MENUブロック指定クラス名付加
        var accord=$('#recent-posts-3,#category-4,#meta-2').find('h3').addClass("wp-accordion");
    
        var accord_itme=$('.wp-accordion');
        accord_itme.css({'cursor':'pointer'});
        accord_itme.next().hide();
    
    
        //指定したいセレクターをセットする。今回は例として最初の要素にしてみた。
        var slide_opendefalt = $('.wp-accordion:first')
        slide_opendefalt.next().show();//再度公開に直す
        slide_opendefalt.addClass("active");//wp-accordionにactiveクラスを付与する
        keep_openItem=slide_opendefalt.next();//現在開いているitemを保持する変数に代入する
    
        //click-action
        $('.wp-accordion').click(function(){
    
    以下略
    
[/code]

非公開にしたものを再度公開にしているので多少冗長です。もっとスマートにやろうと思えばできますが、今回はなるべく元のソースを改変しないように


CC BY-SA 3.0
2017-09-13T03:25:52.877
37910
2017-09-13T03:25:52.877
22665
37905
answer