点击时手风琴图标更改 - javascript答案

【问题标题】：Accordion icon change on click - javascript点击时手风琴图标更改 - javascript
【发布时间】：2015-12-03 04:28:50
【问题描述】：

我当前的手风琴可以正常打开和关闭，并且可以按我的意愿工作，但是关闭选项卡时图标没有正确更改。

即使打开另一个选项卡，关闭前一个选项卡，是否也需要更改图标以匹配选项卡状态？

基本上，图标在打开时应显示减号，在关闭时应显示加号，因此当单击打开的选项卡时，它会更改...

这是一个 JS Fiddle，希望能更清楚地理解这一切...https://jsfiddle.net/wf2goy8s/4/

这是我的javascript：

jQuery(document).ready(function($) {
    var main_blc = $('.main-blc-accord');
    main_blc.find('dd').hide();
    main_blc.find('dd').prev().addClass('plus')
    main_blc.find('dd').first().prev().removeClass('plus');
    main_blc.find('dd').first().show();

    main_blc.find('dt').on('click', function(event) { 
        var dd=$(this).next('dd');
        main_blc.find('dd').not(dd).slideUp('slow');        
        dd.slideToggle();
        $(this).toggleClass('plus');    
    });

    $('.mobile-btn-menu').find('span').on('click', function(event) {
            $(this).parent().next('.footer-menu').toggleClass('show');
    });
});

【问题讨论】：

plus 的 CSS 是什么？
它使用名为“sprite”的图像并移动布局以显示它

标签： javascript jquery icons accordion

【解决方案1】：

您可以尝试按照这些思路使用 CSS。我将此添加到您的小提琴中并且它有效，除了最初未应用 .plus 类，但您可以解决这个问题。

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

【讨论】：

嗨，对不起，我刚刚更新了我的 js fiddle 与我目前在网站上使用的 css jsfiddle.net/wf2goy8s/4
谢谢，我发布了另一个建议作为单独的答案。

【解决方案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:"-";
}

【讨论】：

【解决方案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')
});

【讨论】：