打开/激活手风琴中的第一个标签

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>