Question

我对代码很新（也是stackoverflow的新手，所以如果这个问题的格式略有不正确，我很抱歉，我只是对它进行了解读）。我的手风琴几乎按预期工作。它只有两个标签，当另一个标签打开时，当前标签关闭，这是正确的。但是，我想确保其中一个选项卡始终处于打开状态，并且默认情况下在页面加载时也是如此，因此当页面加载时，第一个选项卡已经打开。如果我点击第二个，那么第一个关闭，第二个打开。如果我再次点击第二个，它会保持打开状态，因为必须始终打开。此时，在页面加载时，它们都会折叠，如果单击当前打开的选项卡，则可以折叠它们。以下是我的代码。

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

当文档准备就绪时，添加＆＃34;打开＆＃34;和＆＃34;活跃＆＃34;类到第一个＆＃34; .accordion-section-content＆＃34;和＆＃34; .accordion-section-title＆＃34;元素分别。别打电话给＃34; close_accordion_section（）＆＃34;单击功能＆＃34; .accordion-section-title＆＃34;已经＆＃34;活跃＆＃34;类。

＆＃13;

$(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();
    });
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

您可以这样做：

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

或

$( ".selector" ).accordion( "option", "active", 2 );

您可以传递任何您希望在页面加载中激活的手风琴面板ID，而不是2。

将其传递给document.ready。

如何确保手风琴标签始终打开，但一次只打开一个

2 个答案: