
[code]

    $(function() {
      // 初期開閉状態設定
      $(".accordionbox dt")
        .filter((i, e) => isActive($(e).next()))
        .each((i, e) => toggle($(e)));
    
      $(".accordionbox dt").on("click", function() {
        toggle($(this));
      });
    });
    
    function toggle($dt) {
      $dt.next().slideToggle(100);
      // activeが存在する場合
      if ($dt.children(".accordion_icon").hasClass('active')) {
        // activeを削除
        $dt.children(".accordion_icon").removeClass('active');
      } else {
        // activeを追加
        $dt.children(".accordion_icon").addClass('active');
      }
    }
    
    // 初期開閉状態の判定
    function isActive($dd) {
      // 特定のラジオボタンをチェックしているか
      if ($dd.find('input[type="radio"].close:checked').length)
        return false;
      // チェックボックスをチェックしているか
      if ($dd.find('input[type="checkbox"]:checked').length)
        return true;
      // テキストボックスに入力があるか
      if ($dd.find('input[type="text"]').filter((i, e) => $(e).val()).length)
        return true;
      return false;
    }
[/code]

[code]

    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
    
    .accordionbox {
      width: 50%;
      background: #FBDBC4;
      margin: 10px auto 40px;
      padding: 20px;
    }
    
    .accordionlist dt {
      display: block;
      background: #fff;
      padding: 20px 0 10px 5px;
      border-top: 1px solid #DFDFDF;
    }
    
    .accordionlist dt:first-child {
      border-top: none !important;
    }
    
    .accordionlist dt .title {
      padding-left: 10px;
      float: left;
    }
    
    .accordionlist dd {
      display: none;
      background: #fff;
      padding: 0 0 20px 15px;
    }
    
    .accordion_icon,
    .accordion_icon span {
      display: inline-block;
      transition: all .4s;
      box-sizing: border-box;
    }
    
    .accordion_icon {
      position: relative;
      width: 30px;
      height: 30px;
      float: right;
      margin-right: 5px;
    }
    
    .accordion_icon span {
      position: absolute;
      left: 6px;
      width: 50%;
      height: 2px;
      background-color: #F88789;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -ms-border-radius: 4px;
      -moz-border-radius: 4px;
      -o-border-radius: 4px;
    }
    
    .accordion_icon span:nth-of-type(1) {
      top: 5px;
      transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
    }
    
    .accordion_icon span:nth-of-type(2) {
      top: 5px;
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
    }
    
    
    /*＋、－切り替え*/
    
    .accordion_icon.active span:nth-of-type(1) {
      display: none;
    }
    
    .accordion_icon.active span:nth-of-type(2) {
      top: 5px;
      transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
    }
[/code]

[code]

    <link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="accordion" class="accordionbox">
      <dl class="accordionlist">
        <dt class="clearfix">
          <div class="title">
            <p>チェック済</p>
          </div>
          <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd><input type="checkbox" checked="checked" /></dd>
        <dt class="clearfix">
          <div class="title">
            <p>未チェック</p>
          </div>
          <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd><input type="checkbox" /></dd>
        <dt class="clearfix">
          <div class="title">
            <p>入力済</p>
          </div>
          <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd><input type="text" value="hoge" /></dd>
        <dt class="clearfix">
          <div class="title">
            <p>未入力</p>
          </div>
          <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd><input type="text" /></dd>
        <dt class="clearfix">
          <div class="title">
            <p>特定のラジオボタンチェック済</p>
          </div>
          <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd><input type="radio" class="close" checked="checked" /><input type="text" value="hoge" /></dd>
        <dt class="clearfix">
          <div class="title">
            <p>特定のラジオボタン未チェック</p>
          </div>
          <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd><input type="radio" class="close" /><input type="text" value="hoge" /></dd>
        <dt class="clearfix">
          <div class="title">
            <p>option valueデータあり</p>
          </div>
          <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd>
        <p>星座:
    <select name="horoscope">
    <option value="Aries">おひつじ座</option>
    <option value="Taurus">おうし座</option>
    <option value="Gemini">ふたご座</option>
    <option value="Cancer">かに座</option>
    <option value="Leo" selected>しし座</option>
    <option value="Virgo">おとめ座</option>
    <option value="Libra">てんびん座</option>
    <option value="Scorpio" disabled>さそり座</option>
    <option value="Saggitarius">いて座</option>
    <option value="Capricorn">やぎ座</option>
    <option value="Aquarius">みずがめ座</option>
    <option value="Pisces">うお座</option>
    </select></p>
        </dd> 
      </dl>
    </div>
[/code]

IE11だとjavascriptのアコーディオンが動きません。  
入力済みのデータがあるときにアコーディオンを開いた状態にしたいです。  
チェックボックスにチェックしていない状態なのにアコーディオンが入力がないのに開くことがあります。  
またiframeの中に文章を書いたときは  
if ($dd.find('input[type="text"]').filter((i, e) => $(e).val()).length)  
return true;  
ではうまくいきません。  
別の方法があるのでしょうか。  
option valueで選択して登録された場合もデータがあるように開いた状態にするにはどうすればよいでしょうか。


CC BY-SA 4.0
2019-02-07T12:14:12.417
52628
2019-04-30T23:26:19.667
25636
question
javascript html css
IE11だとjavascriptのアコーディオンが動かない


質問文のコードが IE11
で動作しない原因は、[コメント欄に書かれている](https://ja.stackoverflow.com/questions/52628/ie11%E3%81%A0%E3%81%A8javascript%E3%81%AE%E3%82%A2%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%82%AA%E3%83%B3%E3%81%8C%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%84#comment55043_52628)ように、
**アロー関数が IE11 では使用出来ないため** です。質問文のコードを Babel を用いて変換をすると、以下のようになります。

[code]

    $(function () {
      // 初期開閉状態設定
      $(".accordionbox dt").filter(function (i, e) {
        return isActive($(e).next());
      }).each(function (i, e) {
        return toggle($(e));
      });
      $(".accordionbox dt").on("click", function () {
        toggle($(this));
      });
    });
    
    function toggle($dt) {
      $dt.next().slideToggle(100); // activeが存在する場合
    
      if ($dt.children(".accordion_icon").hasClass('active')) {
        // activeを削除
        $dt.children(".accordion_icon").removeClass('active');
      } else {
        // activeを追加
        $dt.children(".accordion_icon").addClass('active');
      }
    } // 初期開閉状態の判定
    
    
    function isActive($dd) {
      // 特定のラジオボタンをチェックしているか
      if ($dd.find('input[type="radio"].close:checked').length) return false; // チェックボックスをチェックしているか
    
      if ($dd.find('input[type="checkbox"]:checked').length) return true; // テキストボックスに入力があるか
    
      if ($dd.find('input[type="text"]').filter(function (i, e) {
        return $(e).val();
      }).length) return true;
      return false;
    }
    
[/code]

* * *

次に、 `select` 要素でいずれかの項目を選択しているときに、アコーディオンメニューを開いた状態にするためには、 jQuery の拡張機能である
`selected` セレクターを用いることが出来ます。`selected` セレクターを使うことで、 **`option`
要素のうち選択されているすべての要素を得る**ことが出来ます。

[code]

    $(function() {
      // 初期開閉状態設定
      $(".accordionbox dt").filter(function(i, e) {
        return isActive($(e).next());
      }).each(function(i, e) {
        return toggle($(e));
      });
      $(".accordionbox dt").on("click", function() {
        toggle($(this));
      });
    });
    
    function toggle($dt) {
      $dt.next().slideToggle(100); // activeが存在する場合
    
      if ($dt.children(".accordion_icon").hasClass('active')) {
        // activeを削除
        $dt.children(".accordion_icon").removeClass('active');
      } else {
        // activeを追加
        $dt.children(".accordion_icon").addClass('active');
      }
    } // 初期開閉状態の判定
    
    
    function isActive($dd) {
      // 特定のラジオボタンをチェックしているか
      if ($dd.find('input[type="radio"].close:checked').length) return true; // ラジオボタンをチェックしているか ( false から true に修正 )
    
      if ($dd.find('input[type="checkbox"]:checked').length) return true; // テキストボックスに入力があるか
    
      if ($dd.find('select option:selected').length) return true; // 追記箇所: 選択されている項目があるか
    
      if ($dd.find('input[type="text"]').filter(function(i, e) {
          if ($(e).prev('input[type="radio"]:not(:checked)').length) return; // 追記箇所: テキストボックスが置かれていても、ラジオボタンがあればそれによって判定する
          return $(e).val();
        }).length) return true;
      return false;
    }
    
[/code]

* * *

長くなってしまうため折りたたんでいますが、最終的には以下のコードスニペットのようにすることで、質問者さんの実現したいことが行えると思います。

[code]

    $(function() {
      // 初期開閉状態設定
      $(".accordionbox dt").filter(function(i, e) {
        return isActive($(e).next());
      }).each(function(i, e) {
        return toggle($(e));
      });
      $(".accordionbox dt").on("click", function() {
        toggle($(this));
      });
    });
    
    function toggle($dt) {
      $dt.next().slideToggle(100); // activeが存在する場合
    
      if ($dt.children(".accordion_icon").hasClass('active')) {
        // activeを削除
        $dt.children(".accordion_icon").removeClass('active');
      } else {
        // activeを追加
        $dt.children(".accordion_icon").addClass('active');
      }
    } // 初期開閉状態の判定
    
    
    function isActive($dd) {
      // 特定のラジオボタンをチェックしているか
      if ($dd.find('input[type="radio"].close:checked').length) return true; // ラジオボタンをチェックしているか ( false から true に修正 )
    
      if ($dd.find('input[type="checkbox"]:checked').length) return true; // テキストボックスに入力があるか
    
      if ($dd.find('select option:selected').length) return true; // 追記箇所: 選択されている項目があるか
    
      if ($dd.find('input[type="text"]').filter(function(i, e) {
          if ($(e).prev('input[type="radio"]:not(:checked)').length) return; // 追記箇所: テキストボックスが置かれていても、ラジオボタンがあればそれによって判定する
          return $(e).val();
        }).length) return true;
      return false;
    }
[/code]

[code]

    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
    
    .accordionbox {
      width: 50%;
      background: #FBDBC4;
      margin: 10px auto 40px;
      padding: 20px;
    }
    
    .accordionlist dt {
      display: block;
      background: #fff;
      padding: 20px 0 10px 5px;
      border-top: 1px solid #DFDFDF;
    }
    
    .accordionlist dt:first-child {
      border-top: none !important;
    }
    
    .accordionlist dt .title {
      padding-left: 10px;
      float: left;
    }
    
    .accordionlist dd {
      display: none;
      background: #fff;
      padding: 0 0 20px 15px;
    }
    
    .accordion_icon,
    .accordion_icon span {
      display: inline-block;
      transition: all .4s;
      box-sizing: border-box;
    }
    
    .accordion_icon {
      position: relative;
      width: 30px;
      height: 30px;
      float: right;
      margin-right: 5px;
    }
    
    .accordion_icon span {
      position: absolute;
      left: 6px;
      width: 50%;
      height: 2px;
      background-color: #F88789;
      border-radius: 4px;
      -webkit-border-radius: 4px;
      -ms-border-radius: 4px;
      -moz-border-radius: 4px;
      -o-border-radius: 4px;
    }
    
    .accordion_icon span:nth-of-type(1) {
      top: 5px;
      transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
    }
    
    .accordion_icon span:nth-of-type(2) {
      top: 5px;
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
    }
    
    
    /*＋、－切り替え*/
    
    .accordion_icon.active span:nth-of-type(1) {
      display: none;
    }
    
    .accordion_icon.active span:nth-of-type(2) {
      top: 5px;
      transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      -o-transform: rotate(180deg);
    }
[/code]

[code]

    <link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="accordion" class="accordionbox">
      <dl class="accordionlist">
        <dt class="clearfix">
          <div class="title">
            <p>チェック済</p>
          </div>
          <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd><input type="checkbox" checked="checked" /></dd>
        <dt class="clearfix">
          <div class="title">
            <p>未チェック</p>
          </div>
          <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd><input type="checkbox" /></dd>
        <dt class="clearfix">
          <div class="title">
            <p>入力済</p>
          </div>
          <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd><input type="text" value="hoge" /></dd>
        <dt class="clearfix">
          <div class="title">
            <p>未入力</p>
          </div>
          <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd><input type="text" /></dd>
        <dt class="clearfix">
          <div class="title">
            <p>特定のラジオボタンチェック済</p>
          </div>
          <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd><input type="radio" class="close" checked="checked" /><input type="text" value="hoge" /></dd>
        <dt class="clearfix">
          <div class="title">
            <p>特定のラジオボタン未チェック</p>
          </div>
          <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd><input type="radio" class="close" /><input type="text" value="hoge" /></dd>
        <dt class="clearfix">
          <div class="title">
            <p>option valueデータあり</p>
          </div>
          <p class="accordion_icon"><span></span><span></span></p>
        </dt>
        <dd>
          <p>星座:
            <select name="horoscope">
              <option value="Aries">おひつじ座</option>
              <option value="Taurus">おうし座</option>
              <option value="Gemini">ふたご座</option>
              <option value="Cancer">かに座</option>
              <option value="Leo" selected>しし座</option>
              <option value="Virgo">おとめ座</option>
              <option value="Libra">てんびん座</option>
              <option value="Scorpio" disabled>さそり座</option>
              <option value="Saggitarius">いて座</option>
              <option value="Capricorn">やぎ座</option>
              <option value="Aquarius">みずがめ座</option>
              <option value="Pisces">うお座</option>
            </select>
          </p>
        </dd>
      </dl>
    </div>
[/code]


CC BY-SA 4.0
2019-04-30T23:26:19.667
54621
2019-04-30T23:26:19.667
32986
52628
answer