如何确保手风琴标签在任何时候都是打开的，但同时只打开一个

Question

我对代码很陌生(也是堆栈溢出的新手，所以如果这个问题的格式有点不正确，我很抱歉，我只是想绕开它)。我有一架手风琴，它几乎是按计划工作的。它只有两个选项卡，当打开另一个选项卡时，当前的一个选项卡被关闭，这是正确的。但是，我希望确保其中一个选项卡在任何时候都是打开的，在默认情况下也是在页面加载时打开的，因此当页面加载时，第一个选项卡已经打开。如果我点击第二个，那么第一个关闭，第二个打开。如果我再点击第二个，它会保持打开，因为一个必须在任何时候都打开。在分分钟，在页面加载时，它们都已折叠，如果单击“当前打开”选项卡，则可以折叠。下面是我的密码。

​

$(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”类。点击后不要调用"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>

​

Answer 2

你可以这样做：

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

或

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

而不是2，您可以传递任何手风琴面板id，您想要在页面加载活动。

把它传递到document.ready。