繃圖標的列表

下面的列表是一個快照：

<ul id="Boss"> 
    <li class="B">Beverages 
     <ul> 
      <li class="C">Hot 
       <ul> 
        <li><a href="#">Lorem Ipsum</a> 
      </li> 
      <li><a href="#">Medswer</a> 
      </li> 
       </ul> 
      </li> 

     </ul> 
    </li>

我想一個+/-圖標添加到所有父節點，即那些有class = B，class = C。請參閱CSS類http://jsfiddle.net/NNFEh/7/，我已將圖標設置爲CSS精靈

最初，兩個父節點（class = B）應具有「+」。當用戶點擊這個父節點時，它應該變成「 - 」並且切換，等等。

我該如何做到這一點。提前致謝。

來源

2013-10-18 CuriousDev

**你嘗試過什麼到目前爲止？**如果你能證明你已經做了哪些努力來解決這個你自己，你更容易得到適當的反應。 –

請編輯您的小提琴以包含圖像的完全限定URL，以便它們真正出現。 –

@Paulie_D夠公平的。我已經用新的小提琴 – CuriousDev

首先，你的圖標類沒有設置。然後，你需要在兩個類之間進行切換

$(function() { 
    $('#Boss ul').hide();//Hide everything 
    $('#Boss li').addClass('icon'); //Add the common class 
    $('#Boss li').addClass('closed'); //Add the class of the toggle to closed 
    $('#Boss li').on('click', function (e) { 
     $(this).children('ul').slideToggle() //Open/Close 
     $(this).toggleClass("opened"); //If it's open, it will remove the class or add it 
     $(this).toggleClass("closed"); //If it's closed, it will remove the class, or ad it 
    }); 
});

來源

2013-10-18 16:15:58

繃圖標的列表

回答

相關問題