手风琴图标更改点击 - javascript

我目前的手风琴打开和关闭罚款，并正在工作，因为我想，但图标不会正确更改时关闭标签。手风琴图标更改点击 - javascript

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

本质上的图标应该显示为负时，它的开放和一个加时其关闭，所以当点击打开的选项卡时，它改变了......

这里是一个JS小提琴希望让更多的这一切的感觉... 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'); 
    }); 
});

来源

2015-09-07 5kud

什么是'加号'的CSS？ – Zl3n

它使用名为“精灵”的图像，并移动布局以显示它 – 5kud

你可以尝试使用CSS沿着这些路线。我把它添加到你的小提琴中，它的工作，除了.plus类最初没有应用，但你可以解决。

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

来源

2015-09-07 15:17:35 Kip

嗨，对不起，我刚刚更新了我的js小提琴与我正在使用该网站的CSS https://jsfiddle.net/wf2goy8s/4/ – 5kud

谢谢，我发布了另一个建议作为单独的答案。 – Kip

也许你想试试这个：

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:"-"; 
}

来源

2015-09-07 15:43:26

如果扩大可跟踪，然后切换加上所有节点，最后如果它正在扩大，手柄适当地：

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') 
});

来源

2015-09-07 15:45:59 Kip

手风琴图标更改点击 - javascript

回答

相关问题