加入JavaScript和點擊

Question

刪除類的功能基本上我有這個問題。我有一把手風琴，可以一次打開一個標題，而且我在添加標題右側的開/關圖像時遇到問題。

我有這麼遠，這樣一旦你點擊一個標題它消除了「開放」的形象和切換另一個類爲「關閉」的形象。現在我需要再次將這些類換掉，這樣如果切換另一個標題，它將刪除其他圖像並返回到原始圖像。

這裏是我使用的代碼。

的JavaScript

<SCRIPT> 
    $("#accordion > li").click(function() { 
     $("#accordian li").removeClass("faq-header"); 
     $(this).addClass("faq-header2"); 
     if (false == $(this).next().is(':visible')) { 
      $('#accordion > ul').slideUp(250); 
      $('#accordion > ul').addClass('faq-header'); 
      $(this).removeClass("faq-header"); 
     } 
     $(this).next().slideToggle(300); 
    }); 

    $('#accordion > ul:eq(0)').show(); 
</SCRIPT> 

CSS

#accordion { 
    list-style: none; 
    margin-left:-38px; 
} 
#accordion ul:eq { 
    background-image:url(../img/faq-open.gif); 
    background-repeat:no-repeat; 
    background-position:right; 
    padding-right:20px; 
} 
#accordion li{ 
    display: block; 
    background-color: #FFF; 
    font-weight: bold; 
    cursor: pointer; 
} 
.faq-header { 
    text-align:left; 
    background-image:url(../img/faq-close.gif); 
    background-repeat:no-repeat; 
    background-position:right; 
    margin-right:20px; 
} 
.faq-header2 { 
    text-align:left; 
    background-image:url(../img/faq-open.gif); 
    background-repeat:no-repeat; 
    background-position:right; 
    margin-right:20px; 
} 
#accordion ul { 
    list-style: none; 
    display: none; 
} 
#accordion ul li{ 
    font-weight: normal; 
    cursor: auto; 
    background-color: #fff; 
    border-bottom:1px solid #999; 
    margin-left:-38px !important; 
} 

我已刪除了一個類，並增加了一個類，你可以看到$("#accordian li").removeClass("faq-header");並添加以下$(this).addClass("faq-header2");

但我需要現在刪除.faq-header2，並在不再選擇該部分後加回.faq-header。這對我來說似乎並不難，但我無法弄清楚如何編寫代碼。應該是一個基本的，如果功能我想......

Answer 1

的jQuery UI的手風琴是一個很好的證明跨瀏覽器插件，並在打開和關閉（默認情況下左邊做圖片，但CSS的一個變化將會把它們在

按here

，如果你不將不使用它，我會用persue的toggleClass選項右），here

編輯

感謝您發佈您的HTML，我並不一定意味着整個頁面，只是HTML手風琴的功能，但嘿，多數民衆贊成在很酷

第一點，雖然你的HTML似乎有點重只是做手風琴。它也不是完全有效的將ul放入ul中（它們傾向於進入li中，如下拉菜單樣式）。進一步它似乎並沒有在所有的UL多點，李爲每個UL只有一個李無論如何，似乎只是多了很多標籤比你真正需要的。 UL和李往往附帶了很多默認樣式（要點，邊距，填充，縮進等），這可能意味着不是需要讓他們顯示你怎麼想了很多的CSS。我會用更簡單的結構去編寫你的jQuery。有點像這樣

<div id="accordion"> 
    <h3>First header</h3> 
    <div>First content</div> 
    <h3>Second header</h3> 
    <div>Second content</div> 
</div> 

無論如何，這只是我的經驗評論。手頭您的問題，這個工作對我來說

$("#accordion > li").click(function() {    
      var self = $(this); 
      self.next('ul').slideToggle(300, function() { 
       if ($(this).is(':visible')) { 
        self.removeClass('faq-header').addClass('faq-header2') 
       } 
       else { 
        self.removeClass('faq-header2').addClass('faq-header') 
       } 
      }); 
      self.siblings().removeClass('faq-header2').addClass('faq-header').next('ul').slideUp(250); 
     }); 

toggleClass，雖然有用，但在你的情況爲你要如何添加和刪除類，未必有用，因爲我本來以爲