jquery - 如何确保 Accordion 选项卡始终打开但一次只打开一个

Question

我是代码的新手(也是 stackoverflow 的新手，所以如果这个问题的格式稍微不正确，我深表歉意，我只是在思考它)。我有一架 Accordion 几乎可以正常工作。它只有两个选项卡，当打开另一个选项卡时，当前选项卡将关闭，这是正确的。但是，我想确保其中一个选项卡始终打开，并且默认情况下在页面加载时也打开，因此当页面加载时第一个选项卡已经打开。如果我单击第二个，则第一个关闭，第二个打开。如果我再次单击第二个，它会保持打开状态，因为必须始终打开。目前，在页面加载时，它们都折叠起来，如果您单击当前打开的选项卡，它们也可以折叠起来。下面是我的代码。

$(document).ready(function() {
  function close_accordion_section() {
    $('.accordion .accordion-section-title').removeClass('active');
    $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
  }

  $('.accordion-section-title').click(function(e) {
    var currentAttrValue = $(this).attr('href');

    if ($(e.target).is('.active')) {
      close_accordion_section();
    } else {
      close_accordion_section();
      $(this).addClass('active');
      $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
    }

    e.preventDefault();
  });
});

.accordion,
.accordion * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.accordion {
  overflow: hidden;
  border-radius: 5px;
  background: white;
}

.accordion-section-title {
  width: 100%;
  padding: 0px;
  display: inline-block;
  background: #585858;
  transition: all linear 0.15s;
  font-size: 14px;
  color: #F2F2F2;
}

.accordion-section-title.active,
.accordion-section-title:hover {
  background: white;
  text-decoration: none;
  font-weight: bold;
  color: #585858;
}

.accordion-section:last-child .accordion-section-title {
  border-bottom: none;
}

.accordion-section-content {
  padding: 0px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a>

    <div id="accordion-1" class="accordion-section-content">
      <p>accordion 1 text</p>
    </div>
  </div>
</div>

<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-2">Accordion Section #2</a>

    <div id="accordion-2" class="accordion-section-content">
      <p>accordion 2 text</p>
    </div>
  </div>
</div>

提前致谢!

Answer 1

当文档准备好后，分别将“open”和“active”类添加到第一个“.accordion-section-content”和“.accordion-section-title”元素。如果单击“.accordion-section-title”已经有“active”类，不要调用“close_accordion_section()”函数。

$(document).ready(function () {
    $($('.accordion .accordion-section-title')[0]).addClass('active');
    $($('.accordion .accordion-section-content')[0]).slideDown().addClass('open');

    function close_accordion_section() {
        $('.accordion .accordion-section-title').removeClass('active');
        $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }

    $('.accordion-section-title').click(function (e) {
        var currentAttrValue = $(this).attr('href');

        if ($(e.target).is('.active')) {
            //close_accordion_section();
        } else {
            close_accordion_section();
            $(this).addClass('active');
            $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
        }

        e.preventDefault();
    });
});

.accordion,
.accordion * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.accordion {
  overflow: hidden;
  border-radius: 5px;
  background: white;
}

.accordion-section-title {
  width: 100%;
  padding: 0px;
  display: inline-block;
  background: #585858;
  transition: all linear 0.15s;
  font-size: 14px;
  color: #F2F2F2;
}

.accordion-section-title.active,
.accordion-section-title:hover {
  background: white;
  text-decoration: none;
  font-weight: bold;
  color: #585858;
}

.accordion-section:last-child .accordion-section-title {
  border-bottom: none;
}

.accordion-section-content {
  padding: 0px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a>

    <div id="accordion-1" class="accordion-section-content">
      <p>accordion 1 text</p>
    </div>
  </div>
</div>

<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-2">Accordion Section #2</a>

    <div id="accordion-2" class="accordion-section-content">
      <p>accordion 2 text</p>
    </div>
  </div>
</div>