打开/激活Accordion中的第一个选项卡

Question

请帮我激活第一个标签。现在所有标签都已关闭。我想打开第一个选项卡激活。以下是我的代码。

function close_accordion_section() {
    $('.tw-accordion .emp-list-title a').removeClass('active');
    $('.tw-accordion .emp-list-accordion').slideUp(300).removeClass('open');
}

$('.emp-list-title a').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = $(this).attr('href');

    if($(e.target).is('.active')) {
        close_accordion_section();
    }else {
        close_accordion_section();

        // Add active class to section title
        $(this).addClass('active');
        // Open up the hidden content panel
        $('.tw-accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
    }

    e.preventDefault();
});

这是我的jsfiddle演示位置。输出无法正确显示。它显示了一些错误。 https://jsfiddle.net/uc7utjsf/

请帮帮我。

Answer 1

您忘记了#符号以正确使用ID选择器。

我所做的更改和补充：

$('.tw-accordion #' + currentAttrValue)
$(".emp-lst-sps").first().find("a").addClass("active");
$(".emp-lst-sps").first().find(".emp-list-accordion").show().addClass('open');

<强>演示

$(document).ready(function() {

  $(".emp-lst-sps").first().find("a").addClass("active");
  $(".emp-lst-sps").first().find(".emp-list-accordion").show().addClass('open');

  function close_accordion_section() {
    $('.tw-accordion .emp-list-title a').removeClass('active');
    $('.tw-accordion .emp-list-accordion').slideUp(300).removeClass('open');
  }

  $('.emp-list-title a').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = $(this).attr('href');

    if ($(e.target).is('.active')) {
      close_accordion_section();
    } else {
      close_accordion_section();

      // Add active class to section title
      $(this).addClass('active');
      // Open up the hidden content panel   
      $('.tw-accordion #' + currentAttrValue).slideDown(300).addClass('open');
    }

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

.emp-list-accordion {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tw-accordion">
  <div class="emp-lst-sps">
    <div class="emp-list-title"><a href="review">review</a></div>
    <div id="review" class="emp-list-accordion">
      content Review
    </div>
  </div>
  <div class="emp-lst-sps">
    <div class="emp-list-title"><a href="list">list</a></div>
    <div id="list" class="emp-list-accordion">
      Content list
    </div>
  </div>
</div>