幻灯片的Jquery修改

Question

以下代码保留所有＆＃34; content_opener＆＃34;打开＆＃34; - ＆＃34;符号。当用户点击＆＃34; - ＆＃34;时，那个相应的＆＃34; content_opener＆＃34;将以＆＃34; +＆＃34;关闭符号。

任何人都可以帮助我将其更改为：1st＆＃34; content_opener＆＃34;打开和其他＆＃34; content_opener＆＃34;被关闭。当用户点击其他已关闭的＆＃34; content_opener＆＃34;时，应该打开它，然后打开先前打开的＆＃34; content_opener＆＃34;必须关闭。

<div class="row standardContent racc_parent" data-expandall="">
    <div class="maincontent fullwidth racc columns content twelve large-12 medium-12">
        <div class="heading_opener">
            <span class="heading_title raccopen">
                       <h2>Purpose</h2>
                       </span>
        </div>
        <div class="content_opener">
            <p>purpose</p>
        </div>
    </div>
</div>


<div class="row standardContent racc_parent" data-expandall="">
    <div class="maincontent fullwidth racc columns content twelve large-12 medium-12">
        <div class="heading_opener">
            <span class="heading_title raccopen">
                       <h2>All stuff</h2>
                       </span>
        </div>
        <div class="content_opener">
            <p>All stuff</p>
        </div>
    </div>
</div>

<div class="row standardContent racc_parent" data-expandall="">
    <div class="maincontent fullwidth racc columns content twelve large-12 medium-12">
        <div class="heading_opener">
            <span class="heading_title raccopen">
                       <h2>Things To Do</h2>
                       </span>
        </div>
        <div class="content_opener">
            <p>Things To Do</p>
        </div>
    </div>
</div>

Jquery的：

$(document).ready(function(){
    $('.content_opener').not('.content_open').show();
    $('.heading_opener').click(function(){
    var current_content = $(this).next('.content_opener');
    var current_heading = $(this).find('.heading_title');
    var heading_opener = $(this);
        $('.heading_title').not(current_heading).removeClass('raccopen');
        current_heading.toggleClass('raccopen');
        if(!heading_opener.hasClass('alt')){heading_opener.toggleClass('alt');current_content.slideToggle('fast');}
        else{current_content.slideToggle('fast', function(){
            heading_opener.toggleClass('alt');
        });
        }
        return false;
    });
 }); 

Answer 1

只需在点击时使用$('.content_opener').slideUp();显示该元素，然后隐藏该元素。

如果您只想显示第一个内容，可以$('.content_opener').first().show();使用display: none;并在其他内容上使用$(document).ready(function() { $('.content_opener').first().show(); $('.heading_opener').click(function() { var current_content = $(this).next('.content_opener'); var current_heading = $(this).find('.heading_title'); var heading_opener = $(this); $('.content_opener').slideUp(); $('.heading_title').not(current_heading).removeClass('raccopen'); current_heading.toggleClass('raccopen'); if (!heading_opener.hasClass('alt')) { heading_opener.toggleClass('alt'); current_content.slideToggle('fast'); } else { current_content.slideToggle('fast', function() { heading_opener.toggleClass('alt'); }); } return false; }); });。

您可以查看此 JSfiddle ，或者只是运行以下代码段：

.content_opener {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row standardContent racc_parent" data-expandall="">
  <div class="maincontent fullwidth racc columns content twelve large-12 medium-12">
    <div class="heading_opener">
      <span class="heading_title raccopen">
                       <h2>Purpose</h2>
                       </span>
    </div>
    <div class="content_opener">
      <p>purpose</p>
    </div>
  </div>
</div>


<div class="row standardContent racc_parent" data-expandall="">
  <div class="maincontent fullwidth racc columns content twelve large-12 medium-12">
    <div class="heading_opener">
      <span class="heading_title raccopen">
                       <h2>All stuff</h2>
                       </span>
    </div>
    <div class="content_opener">
      <p>All stuff</p>
    </div>
  </div>
</div>

<div class="row standardContent racc_parent" data-expandall="">
  <div class="maincontent fullwidth racc columns content twelve large-12 medium-12">
    <div class="heading_opener">
      <span class="heading_title raccopen">
                       <h2>Things To Do</h2>
                       </span>
    </div>
    <div class="content_opener">
      <p>Things To Do</p>
    </div>
  </div>
</div>

data => {
    let blob = new Blob([data], { type: "text/csv" }); 
    FileSaver.saveAs(blob, "data.csv);
}