如果用戶點擊另一個按鈕，還原CSS

我有一個jQuery UI手風琴，包括每個標題元素的右箭頭。當用戶單擊標題顯示內容時，箭頭將變爲向下箭頭。當用戶單擊標題隱藏內容時，箭頭將變回原來的形式。如果用戶點擊另一個按鈕，還原CSS

我的問題是當用戶在沒有先關閉上一節的情況下單擊一個附加節標題。如果用戶點擊第1部分，箭頭將會改變。如果用戶點擊第2部分，則第2部分箭頭將改變，但第1部分箭頭將停留在向下位置。如果用戶點擊任何其他部分標題，我需要箭頭才能變回正面朝向的箭頭。

這裏是我的腳本：

var toggleState = true; 

$("#wholesale section").on("click", function() { 
    if(toggleState) { 
     $(this).find(".dropdown-arrow").html("&#x25BC;"); 
     $(this).css("background", "#ececec"); 
    } else { 
     $(this).find(".dropdown-arrow").html("&#9658;"); 
     $(this).css("background", "#f7f7f7"); 
    } 
    toggleState = !toggleState; 
});

來源

2014-01-06 user715564

試^ h ttp：//jsfiddle.net/arunpjohny/TS57R/1/ –

我認爲header1的內容也應該隱藏起來？ – surfmuggle

如果沒有jQuery UI，你可以輕鬆完成。試試這個：http://jsfiddle.net/ashishanexpert/TS57R/4/ –

可以使用activate-event

$("#wholesale").on("accordionactivate", function (e, ui) { 
    ui.oldHeader.find(".dropdown-arrow").html("&#x25BC;"); 
    ui.oldHeader.css("background", "#ececec"); 
    ui.newHeader.find(".dropdown-arrow").html("&#9658;"); 
    ui.newHeader.css("background", "#f7f7f7"); 
});

演示：Fiddle

否則，嘗試像

var $sections = $("#wholesale section").on("click", function() { 
    var $this = $(this).toggleClass('open'); 
    $sections.not(this).removeClass('open').css("background", "#f7f7f7").find(".dropdown-arrow").html("&#x25BC;"); 

    if ($this.hasClass('open')) { 
     $this.find(".dropdown-arrow").html("&#9658;"); 
     $this.css("background", "#f7f7f7"); 
    } else { 
     $this.find(".dropdown-arrow").html("&#x25BC;"); 
     $this.css("background", "#ececec"); 
    } 
});

演示：Fiddle

來源

2014-01-06 16:40:35

是的，激活事件完美地起作用。謝謝您的幫助！ – user715564

您可以添加一個類你擁有的每按鈕，每按一下您恢復每一個按鈕的「正常」位置，然後切換單擊的箭頭。

$("#wholesale section").on("click", function() { 
    $(".buttons").each(function(){ 
     $(this).find(".dropdown-arrow").html("&#9658;"); 
     $(this).css("background", "#f7f7f7"); 
    }) 
    $(this).find(".dropdown-arrow").html("&#x25BC;"); 
    $(this).css("background", "#ececec"); 
});

向每個按鈕添加一個名爲button的類。這樣你就不需要切換。除非你想它可以摺疊。

來源

2014-01-06 16:37:07

如果用戶點擊另一個按鈕，還原CSS

回答

相關問題