我希望有人可以帮助我完成我的代码。
我基本上试图在单击某些元素时更改图标。然后,当单击图标时,它会同时上下动画更改图标图像。
我快到了。当您单击元素时,您会注意到一个问题,然后当您到达元素 3 时,切换会自动打开和关闭。
请看我的片段,看看你们能不能帮我把这件事收紧。
//CHANGE COLOR
function changeColor1() {
$('.jumbotron').css('background-color', '#6aabcb');
$('.topBar').css('background-color', '#bdd2f1');
$('.topBarInner').css('background-image', 'url(http://www.ericnguyen23.com/images/host/arrow-up.png)');
}
function changeColor2() {
$('.jumbotron').css('background-color', '#e4b028');
$('.topBar').css('background-color', '#ffce4e');
$('.topBarInner').css('background-image', 'url(http://www.ericnguyen23.com/images/host/arrow-up-yellow.png) ');
}
function changeColor3() {
$('.jumbotron').css('background-color', '#6990f4');
$('.topBar').css('background-color', '#4e7fff');
$('.topBarInner').css('background-image', 'url(http://www.ericnguyen23.com/images/host/arrow-up-darkblue.png)');
}
$(document).ready(function() {
$('.navLink').on('click', function() {
var id = this.id;
switch (id) {
case 'nav1':
$(".topBarInner").click(function(event) {
event.preventDefault();
if ($(this).hasClass("clicked")) {
$("#contentContainer").stop().animate({
marginTop: "0px"
}, 200);
$(".jumbotron, .headerRow").show(200);
$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up.png)");
} else {
$("#contentContainer").stop().animate({
marginTop: "160px"
}, 200);
$(".jumbotron, .headerRow").hide(200);
$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down.png)");
}
$(this).toggleClass("clicked");
return false;
});
break;
case 'nav2':
$(".topBarInner").click(function(event) {
event.preventDefault();
if ($(this).hasClass("clickedYellow")) {
$("#contentContainer").stop().animate({
marginTop: "0px"
}, 200);
$(".jumbotron, .headerRow").show(200);
$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up-yellow.png)");
} else {
$("#contentContainer").stop().animate({
marginTop: "160px"
}, 200);
$(".jumbotron, .headerRow").hide(200);
$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down-yellow.png)");
}
$(this).toggleClass("clickedYellow");
return false;
});
break;
case 'nav3':
$(".topBarInner").click(function(event) {
event.preventDefault();
if ($(this).hasClass("clickedYellow")) {
$("#contentContainer").stop().animate({
marginTop: "0px"
}, 200);
$(".jumbotron, .headerRow").show(200);
$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up-darkblue.png)");
} else {
$("#contentContainer").stop().animate({
marginTop: "160px"
}, 200);
$(".jumbotron, .headerRow").hide(200);
$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down-darkblue.png)");
}
$(this).toggleClass("clickedBlue");
return false;
});
break;
}
});
});
.headerRow {
padding: 52px 0;
position: relative;
}
.jumbotron {
margin-top: -10px;
padding: 175px 0 0px 0;
background-color: #6aabcb;
color: white;
position: relative;
}
.topBar {
height: 11px;
width: 98%;
background-color: #bdd2f1;
position: absolute;
bottom: 20px;
}
.topBarInner {
background-image: url(http://www.ericnguyen23.com/images/host/arrow-up.png);
background-repeat: no-repeat;
background-size: contain;
height: 28px;
width: 28px;
margin: 0 auto;
}
.clicked {
background-image: url(http://www.ericnguyen23.com/images/host/arrow-down.png);
}
.clickedYellow {
background-image: url(http://www.ericnguyen23.com/images/host/arrow-down-yellow.png);
}
.clickedBlue {
background-image: url(http://www.ericnguyen23.com/images/host/arrow-down-darkblue.png);
}
<div class="container">
<div class="row headerRow">
<a href="#"><img src="http://www.ericnguyen23.com/images/host/logo.jpg" /></a>
</div>
</div>
<div class="jumbotron"></div>
<div id="contentContainer">
<div class="row">
<div class="col-xs-12">
<div class="topBar">
<div class="topBarInner"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<ul>
<li><a href="javascript:;" onclick="changeColor1()" id="nav1" class="navLink">Item 1</a></li>
<li><a href="javascript:;" onclick="changeColor2()" id="nav2" class="navLink">Item 2</a></li>
<li><a href="javascript:;" onclick="changeColor3()" id="nav3" class="navLink">Item 3</a></li>
</ul>
</div>
</div>
</div>
<!--/container-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
最佳答案
这里有两个问题。
完整代码:
function changeColor1() {
$('.jumbotron').css('background-color','#6aabcb');
$('.topBar').css('background-color','#bdd2f1');
$('.topBarInner').css('background-image','url(http://www.ericnguyen23.com/images/host/arrow-up.png)');
}
function changeColor2() {
$('.jumbotron').css('background-color','#e4b028');
$('.topBar').css('background-color','#ffce4e');
$('.topBarInner').css('background-image','url(http://www.ericnguyen23.com/images/host/arrow-up-yellow.png) ');
}
function changeColor3() {
$('.jumbotron').css('background-color','#6990f4');
$('.topBar').css('background-color','#4e7fff');
$('.topBarInner').css('background-image','url(http://www.ericnguyen23.com/images/host/arrow-up-darkblue.png)');
}
$(document).ready(function(){
var id = 'nav1';
$('.navLink').on('click', function () {
id = this.id;
});
$(".topBarInner").unbind('click');
$(".topBarInner").click( function(event){
event.preventDefault();
switch(id) {
case 'nav1':
if ($(this).hasClass("clicked")) {
$("#contentContainer").stop().animate({marginTop:"0px"}, 200);
$(".jumbotron, .headerRow").show(200);
$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up.png)");
} else {
$("#contentContainer").stop().animate({marginTop:"160px"}, 200);
$(".jumbotron, .headerRow").hide(200);
$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down.png)");
}
$(this).toggleClass("clicked");
break;
case 'nav2':
if ($(this).hasClass("clickedYellow")) {
$("#contentContainer").stop().animate({marginTop:"0px"}, 200);
$(".jumbotron, .headerRow").show(200);
$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up-yellow.png)");
} else {
$("#contentContainer").stop().animate({marginTop:"160px"}, 200);
$(".jumbotron, .headerRow").hide(200);
$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down-yellow.png)");
}
$(this).toggleClass("clickedYellow");
break;
case 'nav3':
if ($(this).hasClass("clickedBlue")) {
$("#contentContainer").stop().animate({marginTop:"0px"}, 200);
$(".jumbotron, .headerRow").show(200);
$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up-darkblue.png)");
} else {
$("#contentContainer").stop().animate({marginTop:"160px"}, 200);
$(".jumbotron, .headerRow").hide(200);
$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down-darkblue.png)");
}
$(this).toggleClass("clickedBlue");
break;
}
});
});
.headerRow{
padding:52px 0;
position: relative;
}
.jumbotron {
margin-top:-10px;
padding:175px 0 0px 0;
background-color:#6aabcb;
color: white;
position:relative;
}
.topBar{
height:11px;
width:98%;
background-color:#bdd2f1;
position:absolute;
bottom:20px;
}
.topBarInner{
background-image: url(http://www.ericnguyen23.com/images/host/arrow-up.png);
background-repeat: no-repeat;
background-size:contain;
height:28px;
width:28px;
margin:0 auto;
}
.clicked{
background-image: url(http://www.ericnguyen23.com/images/host/arrow-down.png);
}
.clickedYellow{
background-image: url(http://www.ericnguyen23.com/images/host/arrow-down-yellow.png);
}
.clickedBlue{
background-image: url(http://www.ericnguyen23.com/images/host/arrow-down-darkblue.png);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row headerRow">
<a href="#"><img src="http://www.ericnguyen23.com/images/host/logo.jpg"/></a>
</div>
</div>
<div class="jumbotron"></div>
<div id="contentContainer">
<div class="row">
<div class="col-xs-12">
<div class="topBar"><div class="topBarInner"></div></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<ul>
<li><a href="#" onclick="changeColor1()" id="nav1" class="navLink">Item 1</a></li>
<li><a href="#" onclick="changeColor2()" id="nav2" class="navLink">Item 2</a></li>
<li><a href="#" onclick="changeColor3()" id="nav3" class="navLink">Item 3</a></li>
</ul>
</div>
</div>
</div><!--/container-->
关于jquery - 更改图标颜色并根据选择的元素。包括工作片段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44644564/