0

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

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

【html】

<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>

【css】

#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;
}

【jQuery】

(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)
1
  • 現在ある回答で解決したのであれば、回答の承認をお願いいたします。
    – user10259
    Commented 2017年12月20日 5:01

1 件の回答 1

1

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

(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(){

以下略

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

1
  • keitaro_soさん 早速のご回答をありがとうございました。無事に設定することが出来ました。投稿の編集の件から本当にありがとうございます。
    – minase
    Commented 2017年9月13日 5:17

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。