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