Javascript jquery手风琴打开/关闭

我使用的是具有特殊功能的jquery手风琴。在99%的情况下，它正常工作。我有一个用例，我需要在页面加载时打开顶部/第一个手风琴，同时保持功能（在这种情况下，使用font-awome打开/关闭相应状态的加号/减号）

我可以通过硬编码类“open”和“display:block；”打开手风琴。这样做，它会把我的字体状态搞砸

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>

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>");
    }

  });
});

$（文档）.ready（函数（）{
$（'.accordion toggle'）。打开（'click'，函数（事件）{
event.preventDefault（）；
//创建手风琴变量
var accordion=$（本）；
var accordionContent=accordion.next（'.accordion content'）；
var accordiontogleicon=$（this）.children（'.toggleicon'）；
//切换手风琴链接打开类
手风琴。切换等级（“开放”）；
//切换手风琴内容
手风琴内容。滑动切换（250）；
//更改加号/减号图标
if（手风琴类（“开放”））{
accordiontogleicon.html（“”）；
}否则{
accordiontogleicon.html（“”）；
}
});
});

您可以强制单击，以便重用您的功能。将id添加到要打开的手风琴

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

还可以使用trigger（）方法触发单击。使用trigger（）而不是click（）将消除不明确的调用

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

---

您可以强制单击，以便重用您的函数。将id添加到要打开的手风琴

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

还可以使用trigger（）方法触发单击。使用trigger（）而不是click（）将消除不明确的调用

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

---

只需单击第一个元素：

    $(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');
      /////////////////////////////////
   });

---

只需单击第一个元素：

    $(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');
      /////////////////////////////////
   });

> class=“toggle head”>网络就绪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

$（“#oLink”）.addClass（“open”）；//链接名称
$（“#oLinkDiv”）.show（）//要显示的div名称
$（“#oLinkSpan”）.html（“”）//要更改为的范围-签名
$（“#oLinkSpan”）.html（“”）//改弦更张

$（文档）.ready（函数（）{

查看图像以了解小提琴的详细信息

> class=“toggle head”>网络就绪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

$（“#oLink”）.addClass（“open”）；//链接名称
$（“#oLinkDiv”）.show（）；//要显示的div名称
$（“#oLinkSpan”）.html（“”）//span要更改为-sign的
$（“#oLinkSpan”）.html（“”）///切换成负数

$（文档）.ready（函数（）{

查看图像以了解小提琴的详细信息

---

---

如果手风琴是这样的：它会打开第一个选项卡，默认情况下加载我使用的是“自定义”用户可以随意打开和关闭的版本。如果你看看js fiddle，你就会明白我的意思。我意识到这是独一无二的，但我在这一点上坚持修改多个实现中的单个用例。嘿@DanStump，我仔细查看了fiddle，发现了一个错误，关于$jQ没有正确加载引导。我删除了旧的jQueryjs 1.11.2文件，然后使用jq 2.2.1更新它，看起来效果不错。抱歉，差点忘了小提琴：非常感谢！我使用的是不同版本的实时小提琴，但我使用的是cdn。如果手风琴是这样的：默认情况下，它会打开第一个选项卡，我使用的是“自定义”用户可以随意打开和关闭的版本。如果你看看js fiddle，你就会明白我的意思。我意识到这是独一无二的，但我在这一点上坚持修改多个实现中的单个用例。嘿@DanStump，我仔细查看了fiddle，发现了一个错误，关于$jQ没有正确加载引导。我删除了旧的jQueryjs 1.11.2文件，然后使用jq 2.2.1更新它，看起来效果不错。抱歉，差点忘了提琴：非常感谢！我使用的是不同版本的live，但我使用的是cdn。谢谢！我已经尝试了各种版本，但都失败了。我显然不擅长javascript。欢迎你！如果我的回答有帮助，请回答将其标记为正确：）堆栈溢出的新手。我如何将其标记为答案？这是一个很好的技巧（没有问题），但我建议使用

trigger（）

方法，因为

click（）

方法不明确（

click（）

方法可以是触发器或侦听器），因此最好编写

$（'#ac1'）。trigger（'click'））

以使其防弹。我对这个答案的投票我同意你的看法，马可斯。谢谢，我刚刚修改了我的答案。谢谢！我尝试了不同版本的答案，但失败了。我显然不精通javascript。欢迎你！如果我的答案有帮助，请将其标记为正确：）堆栈溢出新手。我如何将其标记为答案？这是一个好技巧（没有问题），但我建议使用

trigger（）

方法，因为

click（）

是不明确的（

click（）

方法可以是触发器或侦听器），所以最好编写

$（'\ac1'）。trigger（'click'））

让它防弹。我对这个答案的赞成票我同意你，马可斯。谢谢，我刚刚修改了我的答案。谢谢，非常简洁和合乎逻辑。非常感谢！这比公认的答案更防弹，我对你的赞成票，非常简洁和合乎逻辑。非常感谢！这比公认的答案更防弹，我的赞成票哦，你