创建一个带有按钮的滑动顶部菜单栏,并在单击时尝试切换按钮图标,默认为角度向上,并在单击并备份时将其更改为向下倾斜。
所以html函数没有发生
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"
type="text/css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css"
type="text/css">
<style type="text/css">
header{position: relative;}
.headerPrimary{min-height: 40px; background: black; color: white; padding: 20px 5px; width: 100%;}
.headerSecondry{min-height: 100px; background: grey; color: black; padding: 20px 5px; width: 100%; }
.closeDip{position: absolute; padding: 10px 5px; background: red; width: 50px; height: 30px; bottom: -30px; left: 100px; border-radius: 0 0 6px 6px; cursor: pointer;}
</style>
</head>
<body>
<header>
<div class="headerPrimary"></div>
<div class="headerSecondry"></div>
<div class="closeDip"></div>
</header>
</body>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(function(e){
$(".closeDip").html('<i class="fa fa-angle-up"></>');
$(".closeDip").click(function(){
$(".headerSecondry").slideToggle(function(){
$(".closeDip").html('<i class="fa fa-angle-down"></>');
}).click(function(){
$(".closeDip").html('<i class="fa fa-angle-up"></>');
});
});
});
</script>
</html>
答案 0 :(得分:0)
你可以这样做:
$(".closeDip").click(function(){
var $this = $(this);
$(".headerSecondry").slideToggle(function(){
var icon = $this.find('.fa').hasClass('fa-angle-up') ? '<i class="fa fa-angle-down">' : '<i class="fa fa-angle-up">';
//-------------^---missed it.
$this.html(icon);
});
});
在.slideToggle()
方法中,您可以切换图标,并检查所包含的元素是否具有类名fa-angle-up
,因为您已准备好doc。
$(".closeDip").html('<i class="fa fa-angle-up">[+]</i>');
$(".closeDip").click(function() {
var $this = $(this);
$(".headerSecondry").slideToggle(function() {
var icon = $this.find('.fa').hasClass('fa-angle-up') ? '<i class="fa fa-angle-down">[-]</i>' : '<i class="fa fa-angle-up">[+]</i>';
$this.html(icon);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='headerSecondry'>headerSecondry</div>
<div class="closeDip">[+]</div>