手风琴专家组崩溃

时间:2014-03-03 13:01:36

标签: class html accordion

我无法使这些工作正常。我希望手风琴加载关闭,然后点击可扩展。我现在拥有两个加载扩展的手风琴,两个按钮仅适用于第一个。我无法崩溃第二个。这是我的代码:

<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>

2 个答案:

答案 0 :(得分:1)

您正在使用Bootstrap accordion

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

答案 1 :(得分:0)

关于你关闭的部分如下。提取Jquery Acordion的API文档非常简单。快速查看和搜索以低音学习它需要在我在评论中发布的脚本标记中声明的bollean。

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

  

有效:   Boolean:将active设置为false将折叠所有面板。这要求可折叠选项为真。

所以,你需要做的就是如下:

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

如何在你的代码中使用它,我不知道,因为我不知道你的代码以及你如何在你的页面中输入它。如果你像我一样(在你的问题的评论部分内)完成它,就像那样。

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