手風琴圖標更改點擊 - 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

回答

相關問題