Question

我在Drupal 7中创建了一个页面，其中包含四个使用Bootstrap手风琴格式的块。默认情况下，第一个块是打开的。我使用这个jquery

添加了功能

$("#collapse-1-0").addClass("in");

每个视图块都有不同的ID，当我点击下一个视图块时，我希望能够关闭已经打开的视图块。以下是网站上当前使用的代码。

<section id="block-views-tr-plus-at-a-glance-block-1" class="block block-views contextual-links-region clearfix">

<div id="views-bootstrap-accordion-1" class="views-bootstrap-accordion-plugin-style panel-group">
      <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#views-bootstrap-accordion-1" href="#collapse-1-0" aria-expanded="false">
            TRUE REISHI PLUS AT A GLANCE          </a>
        </h4>
      </div>

      <div id="collapse-1-0" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">

  <div class="views-field views-field-body">        <div class="field-content"><ul><li>Made entirely from concentrated Reishi spore oil, making it the most potent Reishi supplement available.</li>
<li>Each serving contains over 120 mg of triterpenes, the most active and therapeutic constituent of Reishi.</li>
<li>Harvested in small batches and cultivated for maximum potency using meticulous cultivation methods perfected through decades of research and experience.</li>
<li>Developed from our premium strain of red Reishi, grown in natural woodlands in the</li>
<li>Chinese countryside.</li>
<li>All natural with no preservatives or additives.</li>
<li>100% vegan.</li>
<li>Packaged with fully recyclable materials.</li>
<li>Produced under Certified Good Manufacturing Practices (GMP) and subject to high levels of quality control</li>
</ul></div>  </div>        </div>
      </div>
    </div>
  </div>

第二个区块代码如下

<section id="block-views-tr-plus-at-a-glance-block" class="block block-views contextual-links-region clearfix">
<div id="views-bootstrap-accordion-2" class="views-bootstrap-accordion-plugin-style panel-group">
      <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#views-bootstrap-accordion-2" href="#collapse-2-0" aria-expanded="true">
            PRODUCT INFORMATION          </a>
        </h4>
      </div>

      <div id="collapse-2-0" class="panel-collapse collapse in" aria-expanded="true">
        <div class="panel-body">

  <div class="views-field views-field-body">        <div class="field-content"><p>With True Reishi Plus, we’ve created a more powerful Reishi supplement, optimized to support your immune system, protect against aging, strengthen your cardiovascular system, and stimulate your overall health and well&shy;being. Packed with a concentration of Reishi’s active ingredients, the powerful triterpenes known for healing the body, True Reishi Plus is effective for maximum healing and support. Taken with True Reishi, True Reishi Plus enhances the active Reishi ingredients present in True Reishi, encouraging maximum healing and increasing the overall nutrition and effectiveness of our Reishi supplements.</p>
<p>Using advanced technology, we extract the spore oil from our Reishi mushrooms, producing a<br>100% natural spore oil supplement which is both rare and potent. Historically, Reishi’s spore oil––the most precious and powerful Reishi constituent––was locked inside of the Reishi mushroom, unable to be utilized for its healing properties. Our supercritical extraction method naturally draws out the active constituents contained within the Reishi spores, delivering the<br>most prized and rare aspect of Reishi to you. This highly concentrated and precious oil results in a premium supplement with maximal impact.</p>
<p>Add True Reishi Plus to your True Reishi Regimen to complement and continue the natural healing power of True Reishi. Taken together, True Reishi and True Reishi Plus deliver a powerful blend of triterpenes and polysaccharides, leading to overall body support and radiant health.</p>
</div>  </div>        </div>
      </div>
    </div>
  </div>

所以block-1默认是打开的，我希望它在点击第二个块（称为块）时关闭

Answer 1

您可以找到每个以＆＃34开头的ID：折叠 - ＆＃34;，删除＆＃34;在＆＃34;中，然后在＆＃34;中添加类＆＃34;到已被点击的字段。

（未经测试）示例：

$("div[id^='collapse-']).click(function(){
    $("div[id^='collapse-']).removeClass('in');
    $(this).addClass('in');
}

下一个块打开时关闭视图bootstrap手风琴块

1 个答案: