The javascript accordion does not work with IE11.

Asked 2 years ago, Updated 2 years ago, 30 views 

$(function(){
  // initial open-close state setting
  $(".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);
  // If active is present
  if($dt.children(".accordion_icon").hasClass('active')}{
    // Remove active
    $dt.children(".accordion_icon").removeClass('active');
  } else{
    // Add active
    $dt.children(".accordion_icon").addClass('active');
  }
}

// determination of initial open/close conditions
function isActive($dd){
  // Are certain radio buttons checked?
  if($dd.find('input[type="radio"].close:checked').length)
    return false;
  // Are you checking the check box?
  if($dd.find('input[type="checkbox"]:checked').length)
    return true;
  // Does the text box contain input?
  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 auto40px;
  padding —20px;
}

.accordionlist dt{
  display:block;
  background: #ffff;
  padding —20px0 10px5px;
  border-top —1px solid#DFDFDF;
}

.accordionlist dt:first-child {
  border-top: none!important;
}

.accordionlist dt.title{
  padding-left —10px;
  float:left;
}

.accordionlistdd{
  display: none;
  background: #ffff;
  padding —00 20px15px;
}

.accordion_icon,
.accordion_iconspan{
  display:inline-block;
  transition —all.4s;
  box-sizing: border-box;
}

.accordion_icon{
  position:relative;
  width: 30px;
  height: 30px;
  float:right;
  margin-right —5px;
}

.accordion_iconspan{
  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_iconspan:nth-of-type(1){
  top —5px;
  transform —rotate (0 deg);
  - webkit-transform:rotate (0 deg);
  -moz-transform:rotate (0 deg);
  -ms-transform:rotate (0 deg);
  -o-transform:rotate (0 deg);
}

.accordion_iconspan:nth-of-type(2){
  top —5px;
  transform —rotate (90 deg);
  - webkit-transform:rotate (90 deg);
  -moz-transform:rotate (90 deg);
  -ms-transform:rotate (90 deg);
  -o-transform:rotate (90 deg);
}


/*+, -Switch*/

.accordion_icon.active span:nth-of-type(1){
  display: none;
}

.accordion_icon.active span:nth-of-type(2){
  top —5px;
  transform —rotate (180 deg);
  - webkit-transform:rotate (180 deg);
  -moz-transform:rotate (180 deg);
  -ms-transform:rotate (180 deg);
  -o-transform:rotate (180 deg);
}
<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>
<divid="accordion" class="accordionbox">
  <dl class="accordionlist">
    <dt class="clearfix">
      <div class="title">
        <p>Checked </p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd><input type="checkbox" checked="checked"/>/dd>
    <dt class="clearfix">
      <div class="title">
        <p>Unchecked </p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd><input type="checkbox"/></dd>
    <dt class="clearfix">
      <div class="title">
        <p> Entered </p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd><input type="text" value="hoge"/></dd>
    <dt class="clearfix">
      <div class="title">
        <p>Unentered </p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd><input type="text"/></dd>
    <dt class="clearfix">
      <div class="title">
        <p> Specific radio button checked</p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd><input type="radio" class="close" checked="checked"/><input type="text" value="hoge"/>/dd>;
    <dt class="clearfix">
      <div class="title">
        <p> Not checked for certain radio buttons</p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd><input type="radio" class="close"/><input type="text" value="hoge"/></dd>
    <dt class="clearfix">
      <div class="title">
        <p>with option value data</p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd>
    <p> constellations:
<select name="horoscope">
<option value="Aries">Aries</option>
<option value="Taurus">Taurus</option>
<option value="Gemini"> Gemini; Gemini;/option>
<option value="Cancer"> Cancer </option>
<option value="Leo" selected > Leo; selected </option>
<option value="Virgo"> Virgo> Virgo</option>
<option value="Libra"> Libra> Libra>
<option value="Scorpio" disabled>Scorpio</option>
<option value="Saggitarius"> constellation </option>
<option value="Capricorn"> Capricorn</option>
<option value="Aquarius"> Aquarius </option>
<option value="Pieces"> Pisces</option>
</select></p>
    </dd> 
  </dl>
</div>

The javascript accordion does not work with IE11.
I would like to leave the accordion open when I have already entered the data.
Sometimes the accordion opens without input even though the check box is not checked.
Also, when you write in iframe,
if($dd.find('input[type="text"]').filter(i,e)=>$(e).val().length)
return true;
Then it won't work.
Is there another way?
How do I keep the data open even if I select an option value and register it?

javascript html css

2022-09-30 10:49

1 Answers

The reason why the code in the question text does not work on IE11 is because the arrow function is not available on IE11 as described in the comment section.If you convert the code in the questionnaire using Babel, you will see the following:

$(function(){
  // initial open-close state setting
  $(".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 present

  if($dt.children(".accordion_icon").hasClass('active')}{
    // Remove active
    $dt.children(".accordion_icon").removeClass('active');
  } else{
    // Add active
    $dt.children(".accordion_icon").addClass('active');
  }
} // Determination of initial open/close conditions


function isActive($dd){
  // Are certain radio buttons checked?
  if ($dd.find('input[type="radio"].close:checked').length) Are you checking the return false;// check box?

  if($dd.find('input[type="checkbox"]:checked').length) return true;// Does the text box contain input?

  if($dd.find('input[type="text"]').filter(function(i,e){
    return$(e).val();
  }).length)return true;
  return false;
}

Then, when you select any item in the select element, you can use the selected selector, which is an extension of jQuery, to get all selected elements of the option element.

$(function(){
  // initial open-close state setting
  $(".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 present

  if($dt.children(".accordion_icon").hasClass('active')}{
    // Remove active
    $dt.children(".accordion_icon").removeClass('active');
  } else{
    // Add active
    $dt.children(".accordion_icon").addClass('active');
  }
} // Determination of initial open/close conditions


function isActive($dd){
  // Are certain radio buttons checked?
  if ($dd.find('input[type="radio"].close:checked').length) return true;// Are you checking the radio button (modified from false to true)?

  if($dd.find('input[type="checkbox"]:checked').length) return true;// Does the text box contain input?

  if($dd.find('select option: selected') .length) return true; // Add: Is there a selected item?

  if($dd.find('input[type="text"]').filter(function(i,e){
      if($(e).prev('input[type="radio"]:not(:checked)').length) return;//Note: Even if a text box is placed, it is determined by the radio button, if any.
      return$(e).val();
    }).length)return true;
  return false;
}

It's folded because it's going to be longer, but in the end, you can do what you want to do by using the code snippet below.

$(function(){
  // initial open-close state setting
  $(".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 present

  if($dt.children(".accordion_icon").hasClass('active')}{
    // Remove active
    $dt.children(".accordion_icon").removeClass('active');
  } else{
    // Add active
    $dt.children(".accordion_icon").addClass('active');
  }
} // Determination of initial open/close conditions


function isActive($dd){
  // Are certain radio buttons checked?
  if ($dd.find('input[type="radio"].close:checked').length) return true;// Are you checking the radio button (modified from false to true)?

  if($dd.find('input[type="checkbox"]:checked').length) return true;// Does the text box contain input?

  if($dd.find('select option: selected') .length) return true; // Add: Is there a selected item?

  if($dd.find('input[type="text"]').filter(function(i,e){
      if($(e).prev('input[type="radio"]:not(:checked)').length) return;//Note: Even if a text box is placed, it is determined by the radio button, if any.
      return$(e).val();
    }).length)return true;
  return false;
}
.clearfix:after{
  content: ";
  display:block;
  clear —both;
}

.accordionbox{
  width: 50%;
  background:#FBDBC4;
  margin —10px auto40px;
  padding —20px;
}

.accordionlist dt{
  display:block;
  background: #ffff;
  padding —20px0 10px5px;
  border-top —1px solid#DFDFDF;
}

.accordionlist dt:first-child {
  border-top: none!important;
}

.accordionlist dt.title{
  padding-left —10px;
  float:left;
}

.accordionlistdd{
  display: none;
  background: #ffff;
  padding —00 20px15px;
}

.accordion_icon,
.accordion_iconspan{
  display:inline-block;
  transition —all.4s;
  box-sizing: border-box;
}

.accordion_icon{
  position:relative;
  width: 30px;
  height: 30px;
  float:right;
  margin-right —5px;
}

.accordion_iconspan{
  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_iconspan:nth-of-type(1){
  top —5px;
  transform —rotate (0 deg);
  - webkit-transform:rotate (0 deg);
  -moz-transform:rotate (0 deg);
  -ms-transform:rotate (0 deg);
  -o-transform:rotate (0 deg);
}

.accordion_iconspan:nth-of-type(2){
  top —5px;
  transform —rotate (90 deg);
  - webkit-transform:rotate (90 deg);
  -moz-transform:rotate (90 deg);
  -ms-transform:rotate (90 deg);
  -o-transform:rotate (90 deg);
}


/*+, -Switch*/

.accordion_icon.active span:nth-of-type(1){
  display: none;
}

.accordion_icon.active span:nth-of-type(2){
  top —5px;
  transform —rotate (180 deg);
  - webkit-transform:rotate (180 deg);
  -moz-transform:rotate (180 deg);
  -ms-transform:rotate (180 deg);
  -o-transform:rotate (180 deg);
}
<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>
<divid="accordion" class="accordionbox">
  <dl class="accordionlist">
    <dt class="clearfix">
      <div class="title">
        <p>Checked </p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd><input type="checkbox" checked="checked"/>/dd>
    <dt class="clearfix">
      <div class="title">
        <p>Unchecked </p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd><input type="checkbox"/></dd>
    <dt class="clearfix">
      <div class="title">
        <p> Entered </p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd><input type="text" value="hoge"/></dd>
    <dt class="clearfix">
      <div class="title">
        <p>Unentered </p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd><input type="text"/></dd>
    <dt class="clearfix">
      <div class="title">
        <p> Specific radio button checked</p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd><input type="radio" class="close" checked="checked"/><input type="text" value="hoge"/>/dd>;
    <dt class="clearfix">
      <div class="title">
        <p> Not checked for certain radio buttons</p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd><input type="radio" class="close"/><input type="text" value="hoge"/></dd>
    <dt class="clearfix">
      <div class="title">
        <p>with option value data</p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd>
      <p> constellations:
        <select name="horoscope">
          <option value="Aries">Aries</option>
          <option value="Taurus">Taurus</option>
          <option value="Gemini"> Gemini; Gemini;/option>
          <option value="Cancer"> Cancer </option>
          <option value="Leo" selected > Leo; selected </option>
          <option value="Virgo"> Virgo> Virgo</option>
          <option value="Libra"> Libra> Libra>
          <option value="Scorpio" disabled>Scorpio</option>
          <option value="Saggitarius"> constellation </option>
          <option value="Capricorn"> Capricorn</option>
          <option value="Aquarius"> Aquarius </option>
          <option value="Pieces"> Pisces</option>
        </select>
      </p>
    </dd>
  </dl>
</div>

2022-09-30 10:49

If you have any answers or tips

Popular Tags
python x 4647
android x 1593
java x 1494
javascript x 1427
c x 927
c++ x 878
ruby-on-rails x 696
php x 692
python3 x 685
html x 656
Popular Questions

524 Uncaught (inpromise) Error on Electron: An object could not be cloned

545 PHP ssh2_scp_send fails to send files as intended

625 /usr/bin/google-chrome:symbol lookup error:/usr/bin/google-chrome: undefined symbol:gbm_bo_get_modifier

553 Scrap text information after the "View More" button when searching in the Yahoo! News search window

540 Unable to install versioned in Google Colab

© 2024 OneMinuteCode. All rights reserved.