Question

我现在的手风琴打开和关闭很好，并且正在按照我的意愿工作，但关闭标签时图标不会正常更改。

即使打开另一个标签，关闭上一个标签，是否还有图标更改以匹配标签状态？

基本上，图标在打开时应显示减号，在关闭时应显示加号，因此当点击打开的标签时，它会发生变化......

这里有一个JS小提琴，希望能更好地理解这一切... https://jsfiddle.net/wf2goy8s/4/

这是我的javascript：

ROW_NUMBER () OVER (
  PARTITION BY PersonID 
  ORDER BY abs(datediff(dd, dischargedate, surveydate)) asc
) AS rn

Answer 1

您可以尝试沿着这些方向使用CSS。我把它添加到你的小提琴中它起作用，除了.plus类最初没有应用，但你可以解决这个问题。

.plus h3:before {
    content: "+ ";
    color: blue;
}

Answer 2

也许你想试试这个：

http://jsfiddle.net/30u0npss/3/

<dl class="accordion">
    <dt><span>Title 1</span><i class="plus"></i></dt>
    <dd class="accordion_content">Content 1</dd>
    <dt><span>Title 2</span><i class="plus"></i></dt>
    <dd class="accordion_content">Content 2</dd>
    <dt><span>Title 3</span><i class="plus"></i></dt>
    <dd class="accordion_content">Content 3</dd>
</dl>
jQuery('.accordion dt').click(function() {
    jQuery(this).toggleClass('active').find('i').toggleClass('plus minus')
           .closest('dt').siblings('dt')
           .removeClass('active').find('i').removeClass('minus').addClass('plus');

          jQuery(this).next('.accordion_content').slideToggle().siblings('.accordion_content').slideUp();


});

jQuery('.accordion_content').hide();
.plus:before{
   content:"+";
}
.minus:before{
   content:"-";
}

Answer 3

您可以跟踪它是否正在扩展，然后切换所有节点的加号，最后如果它正在扩展，请适当处理：

main_blc.find('dt').on('click', function(event) { 
    var expanding = false
    if ($(this).attr('class')==='plus')
        expanding = true
    main_blc.find('dt').addClass('plus');
    var dd=$(this).next('dd');
    main_blc.find('dd').not(dd).slideUp('slow');        
    dd.slideToggle();
    if (expanding)
        $(this).removeClass('plus')
});

手风琴图标更改点击 - javascript

3 个答案: