更改非活动图标上的类-jQuery [英] Change class on inactive icon - jquery
问题描述
我在标题中有两个图标，这些图标的下拉菜单在单击时会切换.
I have two icons in a header that have dropdown menus that are toggled when clicked.
在每个图标的每个列表项中，有一个"i"标记，该标记是"Font Awesome"(向下箭头).单击每个图标后，通过将类别"fa-chevron-down"更改为"fa-chevron-up"，箭头变为指向上方.
Within each list item for each icon there is a 'i' tag which is Font Awesome for a down arrow. When each icon is clicked, the arrow changes to be pointing up by changing the class 'fa-chevron-down' to 'fa-chevron-up'.
但是，如果我单击帮助图标，则帮助下拉列表会向下滑动，如果我再单击购物篮图标，则帮助下拉列表会向上滑动，而购物篮下拉列表也会向下滑动.与此相关的图标中的箭头也需要更改-帮助图标上的箭头需要更改为指向下方，因此该类需要从"fa-chevron-up"更改回"fa-chevron-down"
However, if I click the help icon, the help dropwdown slides down and if I then click the basket icon, the help dropdown slides up and the basket dropdown slides down. The arrows in the relevant icon also need to change with this - the arrow on the help icon would need to change to point down and therefore the class needs to change back to 'fa-chevron-down' from 'fa-chevron-up'.
例如如果购物篮下拉菜单处于活动状态，则帮助图标"i"标签应具有"fa-chevron-down"类，购物篮图标"i"标签应具有"fa-chevron-up"类.如果帮助下拉菜单处于活动状态，则购物篮图标"i"标签应具有"fa-chevron-down"类，帮助图标"i"标签应具有"fa-chevron-up"类.
E.g. if the basket dropdown is active then the help icon 'i' tag should have the class 'fa-chevron-down' and the basket icon 'i' tag should have the class 'fa-chevron-up'. If the help dropdown is active then then basket icon 'i' tag should have the class 'fa-chevron-down' and the help icon 'i' tag should have the class 'fa-chevron-up'.
这是一个jsFiddle: http://jsfiddle.net/2srx4sv2/9/
Here's a 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">»</span></a></li>
<li><a href="">Corporate Sales <span class="hdr_link_arrow">»</span></a></li>
<li><a href="">Got a voucher? <span class="hdr_link_arrow">»</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>
推荐答案
我更新了小提琴，您可以在每一行中使用此行
I updated the fiddle, you could use this line for each one
$(this).children(".fa-chevron-down, .fa-chevron-up").toggleClass( 'fa-chevron-down fa-chevron-up');
http://jsfiddle.net/2srx4sv2/10/
这篇关于更改非活动图标上的类-jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
