手风琴板倒塌

Question

我不能让这些东西正常工作。我希望手风琴加载关闭，然后是可扩展的点击。我现在有两个手风琴，加载扩展，两个按钮都只工作在第一个。我无法第二次崩溃。这是我的代码：

<h2 class="h4 margins">Open Job Positions</h2>

<div class="margin-wrapper">

  <div class="panel-group" id="accordion">

 <div class="panel panel-longform">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
        <span class="pull-right"><i class="glyphicon glyphicon-minus-sign"></i></span>
        Python team leader (Tel Aviv, Belgrade)
      </a>
    </h4>
  </div>
  <div id="collapseOne" class="panel-collapse collapse in">
    <div class="panel-body">
      <p class="lead">We are looking for enthusiastic and talented team leader to join our small team in Tel Aviv or Belgrade.</p>
      <h4>Responsibilities:</h4>
      <ul>
        <li>Managing a team of A-class engineers</li>
        <li>Developing scalable high-load web services in the cloud</li>
        <li>Real-time backoffice with business intelligence</li>
        <li>Multiple platforms (web, mobile)</li>
      </ul>
      <h4>Qualifications:</h4>
      <ul>
        <li>3+ years of leading a team in a dynamic environment (hands-on)</li>
        <li>Python, Ruby or similar language</li>
        <li>MVC web frameworks (Django preferred)</li>
        <li>Excellent English verbal and written communications skills</li>
        <li>SQL and relational database design</li>
        <li>Algorithms, data structures and software design patterns</li>
        <li>Linux Command Line Fu</li>
      </ul>
      <h4>Bonus</h4>
      <ul>
        <li>REST APIs</li>
        <li>Javascript</li>
        <li>HTML5</li>
        <li>Scrum master</li>
        <li>Opensource projects</li>
        <li>Trading systems experience</li>
      </ul>
      <h4>Perks</h4>
      <ul>
        <li>Pick your tech gear</li>
        <li>Agile environment</li>
        <li>Cool office</li>
        <li>Subsidized food</li>
        <li>Unlimited coffee capsules</li>
      </ul>
      <h4>Personality</h4>
      <ul>
        <li>Meet deadlines and milestones</li>
        <li>Like to learn new things</li>
        <li>A sense of humor!</li>
      </ul>
      <hr>
      <p>Excited? If you think you fit and can get things done, welcome aboard!</p>
      <p>
        <a href="mailto:careers@tradecrowd.com?subject=Python team leader (Tel Aviv, Belgrade)" class="btn btn-primary">Apply for This Position</a>
      </p>
    </div>
  </div>
</div> <!-- /.panel -->

<!-- <div class="panel panel-longform">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
        <span class="pull-right"><i class="glyphicon glyphicon-plus-sign"></i></span>
        Some other position with an initial closed state
      </a>
    </h4>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse">
    <div class="panel-body">
      <p class="lead">We are seeking an experienced Community and Brand Manager to help grow the TradeCrowd community and brand globally.</p>
      <h4>What you will be doing:</h4>
      <ul>
        <li>Be our ambassador: you'll be the voice of TradeCrowd in all communication channels from our social media to (future) offline meetings with the community</li>
        <li>Managing our social media presence, especially Facebook and Twitter, crafting and executing creative and engaging social campaigns for different target groups</li>
        <li>Working closely with our community to ensure we are listening to what they want</li>
        <li>Be responsible for setting KPI's and metrics, monitoring impact, and constantly improving what you do and how you do it</li>
      </ul>
      <h4>Skills you should have:</h4>
      <ul>
        <li>2+ years in a consumer-facing social media or digital PR role</li>
        <li>100% digital native. you live the web.</li>
        <li>Strong understanding of social media and online marketing</li>
        <li>Excellent English verbal and written communications skills</li>
        <li>Confident with the creative side of the job AND measurement and evaluation reporting</li>
        <li>Knowledge of tools such as Google Analytics, Mailchimp, Hootsuite, Surveymonkey, etc.</li>
        <li>Be able to work with little supervision in a fast paced, dynamic and entrepreneurial environment</li>
      </ul>
      <hr>
      <p>
        <a href="mailto:careers@tradecrowd.com?subject=Community and Brand Manager (Belgrade)" class="btn btn-primary">Apply for This Position</a>
      </p>
    </div>
  </div>
</div>--> <!-- /.panel -->

</div> <!-- /.panel-group -->

</div>

<br>
<br>

<div class="margin-wrapper">

<div class="panel-group" id="accordion">

  <div class="panel panel-longform">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          <span class="pull-right"><i class="glyphicon glyphicon-minus-sign"></i></span>
          Python team leader (Tel Aviv, Belgrade)
      </a>
    </h4>
  </div>
  <div id="collapseOne" class="panel-collapse collapse in">
    <div class="panel-body">
      <p class="lead">We are looking for enthusiastic and talented team leader to join our small team in Tel Aviv or Belgrade.</p>
      <h4>Responsibilities:</h4>
      <ul>
        <li>Managing a team of A-class engineers</li>
        <li>Developing scalable high-load web services in the cloud</li>
        <li>Real-time backoffice with business intelligence</li>
        <li>Multiple platforms (web, mobile)</li>
      </ul>
      <h4>Qualifications:</h4>
      <ul>
        <li>3+ years of leading a team in a dynamic environment (hands-on)</li>
        <li>Python, Ruby or similar language</li>
        <li>MVC web frameworks (Django preferred)</li>
        <li>Excellent English verbal and written communications skills</li>
        <li>SQL and relational database design</li>
        <li>Algorithms, data structures and software design patterns</li>
        <li>Linux Command Line Fu</li>
      </ul>
      <h4>Bonus</h4>
      <ul>
        <li>REST APIs</li>
        <li>Javascript</li>
        <li>HTML5</li>
        <li>Scrum master</li>
        <li>Opensource projects</li>
        <li>Trading systems experience</li>
      </ul>
      <h4>Perks</h4>
      <ul>
        <li>Pick your tech gear</li>
        <li>Agile environment</li>
        <li>Cool office</li>
        <li>Subsidized food</li>
        <li>Unlimited coffee capsules</li>
      </ul>
      <h4>Personality</h4>
      <ul>
        <li>Meet deadlines and milestones</li>
        <li>Like to learn new things</li>
        <li>A sense of humor!</li>
      </ul>
      <hr>
      <p>Excited? If you think you fit and can get things done, welcome aboard!</p>
      <p>
        <a href="mailto:careers@tradecrowd.com?subject=Python team leader (Tel Aviv, Belgrade)" class="btn btn-primary">Apply for This Position</a>
      </p>
    </div>
  </div>
</div> <!-- /.panel -->

<!-- <div class="panel panel-longform">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
        <span class="pull-right"><i class="glyphicon glyphicon-plus-sign"></i></span>
        Some other position with an initial closed state
      </a>
    </h4>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse">
    <div class="panel-body">
      <p class="lead">We are seeking an experienced Community and Brand Manager to help grow the TradeCrowd community and brand globally.</p>
      <h4>What you will be doing:</h4>
      <ul>
        <li>Be our ambassador: you'll be the voice of TradeCrowd in all communication channels from our social media to (future) offline meetings with the community</li>
        <li>Managing our social media presence, especially Facebook and Twitter, crafting and executing creative and engaging social campaigns for different target groups</li>
        <li>Working closely with our community to ensure we are listening to what they want</li>
        <li>Be responsible for setting KPI's and metrics, monitoring impact, and constantly improving what you do and how you do it</li>
      </ul>
      <h4>Skills you should have:</h4>
      <ul>
        <li>2+ years in a consumer-facing social media or digital PR role</li>
        <li>100% digital native. you live the web.</li>
        <li>Strong understanding of social media and online marketing</li>
        <li>Excellent English verbal and written communications skills</li>
        <li>Confident with the creative side of the job AND measurement and evaluation reporting</li>
        <li>Knowledge of tools such as Google Analytics, Mailchimp, Hootsuite, Surveymonkey, etc.</li>
        <li>Be able to work with little supervision in a fast paced, dynamic and entrepreneurial environment</li>
      </ul>
      <hr>
      <p>
        <a href="mailto:careers@tradecrowd.com?subject=Community and Brand Manager (Belgrade)" class="btn btn-primary">Apply for This Position</a>
      </p>
    </div>
  </div>
</div>--> <!-- /.panel -->

</div> <!-- /.panel-group -->

</div>

Answer 1

您正在使用鞋带手风琴。

1. 使所有折叠从所有类中删除所有"in“类 <div id="collapseOne" class="panel-collapse collapse in">
2. 为每个<div id="uniq-ID" class="panel-collapse collapse">使用唯一的ID
3. 将该ID用作相关<a class="accordion-toggle">的"href“ 例如，<a href="#uniq-ID" class="accordion-toggle">

Answer 2

关于你结束的部分如下所示。提取Jquery的API文档非常简单。快速浏览和搜索就会发现，这需要在我张贴在评论中的脚本标签中显示一个粗体。

http://api.jqueryui.com/accordion/

活动：布尔值:将活动设置为false将折叠所有面板。这要求可折叠选项为true。

所以在技术上，你需要做的是：

$( ".selector" ).accordion({ active: 2 });

如何在您的代码中，我不知道，因为我不知道您的代码和您如何在您的页面中输入它。如果你像我一样(在你问题的评论部分)这样做，那就是这样。

请记住:选择器需要替换为您的Id，就像您指定手风琴到您的div Id之前一样。