更改類 - jQuery的

我在有點擊時被切換下拉菜單頭兩個圖標。更改類 - jQuery的

在每個圖標每個項目有一個「我」標籤，它是字體真棒爲一個向下的箭頭。當每個圖標被點擊時，通過將類「fa-chevron-down」更改爲「fa-chevron-up」，箭頭將變爲指向。

但是，如果我點擊幫助圖標，幫助dropwdown下滑，如果我再點擊圖標籃筐，幫助下拉滑起來，籃下下拉滑下。在相關的圖標中的箭頭也需要這方面的改變 - 上的幫助圖標上的箭頭將需要改變點下去，因此類需要從「FA-字形一起」回「FA-字形下」改變。

E.g.如果籃子下拉菜單處於活動狀態，那麼幫助圖標'i'標籤應該有'fa-chevron-down'類，籃子圖標'i'標籤應該有'fa-chevron-up'類。如果幫助下拉被激活，然後再籃圖標「我」的標籤應該有一流的「FA-字形向下」和幫助圖標「我」的標籤應該有一流的「FA-字形向上」。

這裏有一個的jsfiddle：http://jsfiddle.net/2srx4sv2/9/

的代碼是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="viewport" content="format-detection=no,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,width=device-width" /> 
<title>Untitled Document</title> 
<link href="http://www.swimmingcover.co.uk/test_new/css/header.css" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" href="http://www.swimmingcover.co.uk/test_new/css/font-awesome.min.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script src="http://www.swimmingcover.co.uk/test_new/js/mobile.js" type="text/javascript"></script> 
</head> 

<body> 
<div id="header"> 
    <ul class="hdr_link_icons"> 
     <li class="icon_basket"><img src="http://www.swimmingcover.co.uk/test_new/images/header/icon_basket.jpg" alt="My basket" /><i class="fa fa-chevron-down"></i></li> 
     <li class="icon_help"><img src="http://www.swimmingcover.co.uk/test_new/images/header/icon_help.jpg" alt="Help Section" /><i class="fa fa-chevron-down"></i></li> 
    </ul>  
    <ul class="hdr_dropdown_area" id="help_dropdown"> 
     <li><a href="">Your Account <span class="hdr_link_arrow">&#187;</span></a></li> 
     <li><a href="">Corporate Sales <span class="hdr_link_arrow">&#187;</span></a></li> 
     <li><a href="">Got a voucher? <span class="hdr_link_arrow">&#187;</span></a></li> 
    </ul> 
    <div id="dvBasket" class="basketoverview hdr_dropdown_area"> 
     <div class="heading">Total items: 1</div> 
     <div class="item"> 
      <div class="details"> 
       <a href="#"> 
        Product 1 
       </a> 
       <br /> 
       <span class="price">£39.00</span> 
      </div>   
     </div> 
     <div class="item"> 
      <div class="details"> 
       <a href="#"> 
        Product 2 
       </a> 
       <br /> 
       <span class="price">£39.00</span> 
      </div>   
     </div> 
     <div class="bottom">   
      <a title="Your basket" href="#">View Basket</a> 
     </div> 
    </div> 
</div> 

</body> 
</html>

來源

2014-10-07 Catherine Allen

字體在jsfiddle-awesome css中不加載 – 2014-10-07 21:34:53

我更新了小提琴，你可以使用這條線爲每一個

$(this).children(".fa-chevron-down, .fa-chevron-up").toggleClass('fa-chevron-down fa-chevron-up');

http://jsfiddle.net/2srx4sv2/10/

來源

2014-10-07 21:39:37

我添加了t他字體真棒既Jsfiddles但它仍然似乎並不奏效 – 2014-10-08 06:14:26

我的jsfiddle工作，在我的答案 – 2014-10-08 15:45:13

鏈接偉大的作品，非常感謝你！ :) – joryl 2016-10-05 06:17:53

更改類 - jQuery的

回答

相關問題