Question

对于啰嗦的标题感到抱歉，但很难在一行中解释。

这是我正在尝试做的事情：

点击列表“第2项”，我将蓝色加号图标的图像更改为黄色加号图标，反之亦然。（DONE）
点击加号图标会将标题/ jumbotron部分设置为动画，同时将加号图标更改为减号图标（完成）
但是，当我点击列表“第2项”，将蓝色图标更改为黄色，然后单击该图标以使标题/ jumbotron动画时，黄色图标将变回蓝色图标。我希望黄色图标在任何时候点击“项目2”时保持黄色，蓝色图标随时保持蓝色“项目1”点击。

//ANIMATE UP/DOWN ON CLICK OF ICON
$(document).ready(function(){
	$(".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;

	});
    
});
    
//CHANGE ICON & BACKGROUND 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)');
}

.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:85px;
	}
	
.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);
	}

<link href="http://www.ericnguyen23.com/images/host/bootstrap.min.css" rel="stylesheet"/>

<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="#" data-toggle="tab" onclick="changeColor1()">Item 1</a></li>   
                <li><a href="#" onclick="changeColor2()">Item 2</a></li>    
            </ul>     
      	</div>
    </div> 
</div><!--/container-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

以下是css中!important关键字的快速修复，并使用类更新dom而不是更改所选类的样式。 !important关键字不是一个好习惯，但到目前为止，这是我发现修复它的唯一方法。我明天会看一下，看看能否进一步提升。另外，我已将jQuery的链接从<body的底部移到<head部分，因为所有库都应该在那里。我将本地javascript脚本放在body的底部，而不是推荐的。这是完整的代码：

<!DOCTYPE HTML>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="styles2.css">
    <link href="http://www.ericnguyen23.com/images/host/bootstrap.min.css" rel="stylesheet"/>

    <link rel="icon" href="./bilder/icon.ico">  
    <title>Kletterwelt - Home</title>
</head>

<body>

  <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="#" data-toggle="tab" onclick="changeColor1()">Item 1</a></li>   
                  <li><a href="#" onclick="changeColor2()">Item 2</a></li>    
              </ul>     
          </div>
      </div> 
  </div><!--/container-->
  <script src="scripts2.js"></script>
</body>
</html>

CSS中的其他类：

.jumbotron-colored {
  background-color: #e4b028 !important;
}
.topBar-colored {
  background-color: #ffce4e !important;
}
.topBarInner-colored {
  background-image: url(http://www.ericnguyen23.com/images/host/arrow-up-yellow.png) !important;
}

JS文件更改中的

changeColor()函数：

function changeColor1() {
    $('.jumbotron').removeClass('jumbotron-colored');
    $('.topBar').removeClass('topBar-colored');
    $('.topBarInner').removeClass('topBarInner-colored');
}

function changeColor2() {
    $('.jumbotron').addClass('jumbotron-colored');
    $('.topBar').addClass('topBar-colored');
    $('.topBarInner').addClass('topBarInner-colored');
}

单击时更改png图像，但第二次单击后新图像将恢复为原始图像

1 个答案: