jQuery手風琴打開/關閉

Question

我正在使用具有特殊功能的jQuery手風琴。 在99％的情況下，其功能均應正常運行。 我有一個用例，需要在保持功能的同時在頁面加載時打開頂部/第一手風琴（在這種情況下，正負號對應的狀態是使用font-awesome打開或關閉）。

我可以通過硬編碼類“ open”和“ display：block;”來打開手風琴。 這樣做會搞亂我的字體超贊狀態。

JSFiddle

的HTML

<div class="accordion-container">
  <a class="accordion-toggle" href="#"><span class="toggle-head"><h2 class="t-h2">Web Ready Lorem Ipsum</h2>

    </span><span class="toggle-icon"><i class="fa fa-plus"></i></span></a>
  <div class="accordion-content">
    <p>The images below provide examples of safe sleep environments that follow the safe sleep strategies explained in Safe to Sleep<sup>®</sup> materials.</p>
    <p>These low-resolution images are available for your convenience. If you choose to use the images, you are agreeing to: </p>
    <ul class="sts-bullet">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Duis malesuada purus sit amet tellus semper tempus.</li>
      <li>Etiam iaculis est ac erat mollis, vitae vulputate ante sagittis.</li>
      <li>Mauris interdum nulla interdum libero hendrerit interdum.</li>
      <li>Cras aliquet arcu vitae mattis congue.Cras aliquet arcu vitae mattis congue.</li>
      <li>Vivamus bibendum arcu vel enim luctus, eu dignissim erat efficitur.</li>
    </ul>
  </div>
</div>
<div class="accordion-container">
  <a class="accordion-toggle" href="#"><span class="toggle-head"><h2 class="t-h2">Web-Ready Lorem Ipsum is simply dummy text 2</h2>

    </span><span class="toggle-icon"><i class="fa fa-plus"></i></span></a>
  <div class="accordion-content">
    <p>The images below provide examples of safe sleep environments that follow the safe sleep strategies explained in Safe to Sleep<sup>®</sup> materials.</p>
    <p>These low-resolution images are available for your convenience. If you choose to use the images, you are agreeing to: </p>
    <ul class="sts-bullet">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Duis malesuada purus sit amet tellus semper tempus.</li>
      <li>Etiam iaculis est ac erat mollis, vitae vulputate ante sagittis.</li>
      <li>Mauris interdum nulla interdum libero hendrerit interdum.</li>
      <li>Cras aliquet arcu vitae mattis congue.Cras aliquet arcu vitae mattis congue.</li>
      <li>Vivamus bibendum arcu vel enim luctus, eu dignissim erat efficitur.</li>
    </ul>
  </div>
</div>
<div class="accordion-container">
  <a class="accordion-toggle" href="#"><span class="toggle-head"><h2 class="t-h2">Web-Ready Lorem Ipsum is simply dummy text 3</h2>

    </span><span class="toggle-icon"><i class="fa fa-plus"></i></span></a>
  <div class="accordion-content">
    <p>The images below provide examples of safe sleep environments that follow the safe sleep strategies explained in Safe to Sleep<sup>®</sup> materials.</p>
    <p>These low-resolution images are available for your convenience. If you choose to use the images, you are agreeing to: </p>
    <ul class="sts-bullet">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Duis malesuada purus sit amet tellus semper tempus.</li>
      <li>Etiam iaculis est ac erat mollis, vitae vulputate ante sagittis.</li>
      <li>Mauris interdum nulla interdum libero hendrerit interdum.</li>
      <li>Cras aliquet arcu vitae mattis congue.Cras aliquet arcu vitae mattis congue.</li>
      <li>Vivamus bibendum arcu vel enim luctus, eu dignissim erat efficitur.</li>
    </ul>
  </div>
</div>

的CSS

/*ACCORDION*/
.accordion-container {
    width: 100%;
    margin-top: 1em;
    /*clear: both;*/
}

.toggle-head {
    display: block;
    max-width: 95%;
    font-weight: 700;
}

.accordion-toggle {
    position: relative;
    display: block;
    padding: 10px;
    font-size: 1em;
    font-weight: 400;
    background: #f3f3f3;
    color: #000 !important;
    text-decoration: none !important;
}

.accordion-toggle.open {
    background: #f3f3f3;
    color: #fff;
}

.accordion-toggle:hover {
    background: #E8E8E8;
}

.accordion-toggle span.toggle-icon {
    position: absolute;
    right: .5em;
    font-size: 1.5em;
    color: #65308a;
    top: .5em;
}

.accordion-content {
    display: none;
    padding: 20px;
    overflow: auto;
    background-color: transparent;
}

jQuery的

$(document).ready(function() {
  $('.accordion-toggle').on('click', function(event) {
    event.preventDefault();
    // create accordion variables
    var accordion = $(this);
    var accordionContent = accordion.next('.accordion-content');
    var accordionToggleIcon = $(this).children('.toggle-icon');

    // toggle accordion link open class
    accordion.toggleClass("open");
    // toggle accordion content
    accordionContent.slideToggle(250);

    // change plus/minus icon
    if (accordion.hasClass("open")) {
      accordionToggleIcon.html("<i class='fa fa-minus'></i>");
    } else {
      accordionToggleIcon.html("<i class='fa fa-plus'></i>");
    }

  });
});

Answer 1

您可以強制單擊，以便重新使用功能。 向您要打開的手風琴添加一個ID ...

  <a class="accordion-toggle" id="ac1" .... > </a>

然后在腳本末尾添加

$('#ac1').click();

您也可以使用trigger（）方法觸發點擊。 使用trigger（）代替click（）將消除模棱兩可的調用。

$('#ac1').trigger('click'); 

Answer 2

只需觸發單擊第一個元素：

    $(document).ready(function() {
      var toggles = $('.accordion-toggle')
      toggles.on('click', function(event) {
           event.preventDefault();
           // create accordion variables
           var accordion = $(this);
           var accordionContent = accordion.next('.accordion-content');
           //// ...............

      });
      // Fire click! /////////////////
      toggles.first().trigger('click');
      /////////////////////////////////
   });

Answer 3

>

class =“ toggle-head”>可用於Web的Lorem Ipsum-

命名所有將要受到影響的元素，如上所示，然后在

$("#oLink").addClass("open"); // link name
$("#oLinkDiv").show(); //div name you want to show
$("#oLinkSpan").html(''); //span that you want to change to - sign
$("#oLinkSpan").html('<i class="fa fa-minus"></i>'); //chaging sing to minus

$（document）.ready（function（）{

檢查圖像以獲取小提琴的細節