Question

我在标题中有两个图标，其中包含下拉菜单，点击后会切换。

在每个图标的每个列表项中都有一个＆＃39; i＆＃39;标签是向下箭头的字体真棒。当点击每个图标时，箭头会变为指向上方，方法是更改班级＆＃39; fa-chevron-down＆＃39; to-fa-chevron-up＆＃39;。

但是，如果我单击帮助图标，帮助下拉列表会向下滑动，如果我然后单击篮子图标，则帮助下拉列表会向上滑动，篮子下拉列表会向下滑动。相关图标中的箭头也需要随之改变 - 帮助图标上的箭头需要更改为指向下方，因此课程需要更改为“反式” - “＃”;来自＆＃39; fa-chevron-up＆＃39;。

E.g。如果购物篮下拉菜单处于有效状态，则表示帮助图标为“我”。标签应该有类＆＃39; fa-chevron-down＆＃39;篮子图标＆＃39; i＆＃39;标签应该有类＆＃39; fa-chevron-up＆＃39;。如果帮助下拉列表处于活动状态，那么篮子图标“i”＃标签应该有类＆＃39; fa-chevron-down＆＃39;以及帮助图标＆＃39; i＆＃39;标签应该有类＆＃39; fa-chevron-up＆＃39;。

这里是一个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>

Answer 1

我更新了小提琴，你可以为每一个使用这一行

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

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

在非活动图标上更改类 - jquery

1 个答案: