幻灯片切换和切换类

我为具有2个图标的移动网站创建标题 - 一个用于购物篮，另一个用于帮助部分，每个点击时都会显示下拉菜单并提供更多信息。幻灯片切换和切换类

我需要让它工作，所以只有一个下拉菜单出现在任何一个时间，而非活动图标的内部span类应该返回到类“fa-chevron-down”。

这里是一个的jsfiddle：http://jsfiddle.net/2srx4sv2/

下面是代码：

<!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

$(function() { 
    $('.icon_help').click(function() { 
     $("#help_dropdown").slideToggle('slow'); 
     $(".icon_help .fa-chevron-down, .icon_help .fa-chevron-up").toggleClass('fa-chevron-down fa-chevron-up');  
     $(".basketoverview").slideUp('slow'); 
    }); 
    $('.icon_basket').click(function() { 
     $(".basketoverview").slideToggle('slow'); 
     $(".icon_basket .fa-chevron-down, .icon_basket .fa-chevron-up").toggleClass('fa-chevron-down fa-chevron-up'); 
     $("#help_dropdown").slideUp('slow'); 
    }); 
});

http://jsfiddle.net/2srx4sv2/1/这样的事情？

来源

2014-10-07 20:02:48 sinisake

嗨，没关系，谢谢你 - 这个切换工作得很好，但是关于非活动图标跨度的类不会变回'.fa-chevron-down' - 任何想法？ – 2014-10-07 20:21:11

嗯......正如我所看到的类改为HTML，点击（在控制台中检查） - 所以，我想只是正确的CSS应该被添加？ – sinisake 2014-10-07 20:33:11

如果我点击帮助图标，然后点击篮子图标，帮助下拉菜单向上滑动，篮子下拉菜单滑下来，但是这行代码如下：

幻灯片切换和切换类

回答

相关问题