在切换之间交换图标图像

时间：2016-06-09 14:37:28

标签： javascript jquery css css3 toggle

我有两个不同的图标，一个减号和加号。在页面加载时，所有.project-name-block都有一个加号。当有人点击项目标题时，我希望减号显示它已被打开。

我尝试过以下操作：

$('.project-name-title').click(function() {
      var relative = $(this).next('.project-name-block-container');
      if (!relative.hasClass('opened')) {
        $('.opened').slideUp(500).removeClass('opened');
        relative.addClass('opened minus-icon').slideDown();
      } else {
        relative.slideUp(500).removeClass('opened add-icon');
      }
      return false;
    });

但它没有做到这一点。我做错了什么？

$('.project-name-title').click(function() {
  var relative = $(this).next('.project-name-block-container');
  if (!relative.hasClass('opened')) {
    $('.opened').slideUp(500).removeClass('opened');
    relative.addClass('opened').slideDown();
  } else {
    relative.slideUp(500).removeClass('opened');
  }
  return false;
});
#project-section-container {
	height: auto;
	width: 60%;	
}
.project-name-block-container {
  display: none;
}
.project-name-block {
	border-top: 1px solid #858585;
	width: 100%;
	padding: 50px 0;
	text-align: center;
}
.project-name-title {
	color: #072919;
	font-size: 2em;
	cursor: pointer;
	display: block;
}
.add-icon {
	margin-left: 10px;
	height: 20px;
	width: 20px;
}
.minus-icon {
	display: none;
}
.project-name-description {
	font-size: 1em;
	margin-top: 25px;
}
/*.project-name-description.active {
	display: block;
}*/
/*--Project Images---*/
.project-image-container {
	width: 90%;
	margin: 50px 5%;
}
.project-img {
	width: 30%;
	height: auto;
	
}
.project-img.left {
	margin-right: 10%;
}
.project-img.right {
	margin-left: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="project-section-container">
			<div class="project-name-block">
				<div class="project-name-title">Project 1 <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon"><img src="icons/minus-icon.png" alt="" class="minus-icon"></div>
				<div class="project-name-block-container">
					<div class="project-name-description">This is the text for Project 1</div>
					<div class="project-image-container">
						<img src="images/projects/project1.jpg" alt="Demolition Project" class="project-img left">
						<img src="images/projects/project2.jpg" alt="Demolition Project" class="project-img right">
					</div>
				</div>
			</div>
			<div class="project-name-block">
				<div class="project-name-title">Project 2 <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon"></div>
				<div class="project-name-block-container">
					<div class="project-name-description">This is the text for Project 2</div>
				</div>
			</div>
			<div class="project-name-block">
				<div class="project-name-title">Project 3 <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon"></div>
				<div class="project-name-block-container">
					<div class="project-name-description">This is the text for Project 3</div>
				</div>
			</div>
			<div class="project-name-block">
				<div class="project-name-title">Project 4 <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon"></div>
				<div class="project-name-block-container">
					<div class="project-name-description">This is the text for Project 4</div>
				</div>
			</div>
			<div class="project-name-block">
				<div class="project-name-title">Project 5 <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon"></div>
				<div class="project-name-block-container">
					<div class="project-name-description">This is the text for Project 5</div>
				</div>
			</div>
		</div>
		</div>

1 个答案:

答案 0 :(得分：2)

将opened类添加到标题而不是内容上，然后您可以使用css显示/隐藏相关图标： - 

.opened .minus-icon,
.add-icon {
    margin-left: 10px;
    height: 20px;
    width: 20px;
    display: inline;
}

.opened .add-icon,
.minus-icon {
    display: none;
}

另外，您需要为每个添加负图像而不是仅添加第一个。

＆＃13;
＆＃13; 
$('.project-name-title').click(function() {
  var relative = $(this);
  if (!relative.hasClass('opened')) {
    $('.opened').removeClass('opened').next('.project-name-block-container').slideUp(500);
    relative.addClass('opened').next('.project-name-block-container').slideDown();
  } else {
    relative.removeClass('opened').next('.project-name-block-container').slideUp(500);
  }
  return false;
});
＆＃13; 
#project-section-container {
  height: auto;
  width: 60%;
}
.project-name-block-container {
  display: none;
}
.project-name-block {
  border-top: 1px solid #858585;
  width: 100%;
  padding: 50px 0;
  text-align: center;
}
.project-name-title {
  color: #072919;
  font-size: 2em;
  cursor: pointer;
  display: block;
}
.opened .minus-icon,
.add-icon {
  margin-left: 10px;
  height: 20px;
  width: 20px;
  display: inline;
}
.opened .add-icon,
.minus-icon {
  display: none;
}
.project-name-description {
  font-size: 1em;
  margin-top: 25px;
}
/*.project-name-description.active {
	display: block;
}*/

/*--Project Images---*/

.project-image-container {
  width: 90%;
  margin: 50px 5%;
}
.project-img {
  width: 30%;
  height: auto;
}
.project-img.left {
  margin-right: 10%;
}
.project-img.right {
  margin-left: 10%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="project-section-container">
  <div class="project-name-block">
    <div class="project-name-title">Project 1
      <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon">
      <img src="icons/minus-icon.png" alt="" class="minus-icon">
    </div>
    <div class="project-name-block-container">
      <div class="project-name-description">This is the text for Project 1</div>
      <div class="project-image-container">
        <img src="images/projects/project1.jpg" alt="Demolition Project" class="project-img left">
        <img src="images/projects/project2.jpg" alt="Demolition Project" class="project-img right">
      </div>
    </div>
  </div>
  <div class="project-name-block">
    <div class="project-name-title">Project 2
      <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon">
    </div>
    <div class="project-name-block-container">
      <div class="project-name-description">This is the text for Project 2</div>
    </div>
  </div>
  <div class="project-name-block">
    <div class="project-name-title">Project 3
      <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon">
    </div>
    <div class="project-name-block-container">
      <div class="project-name-description">This is the text for Project 3</div>
    </div>
  </div>
  <div class="project-name-block">
    <div class="project-name-title">Project 4
      <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon">
    </div>
    <div class="project-name-block-container">
      <div class="project-name-description">This is the text for Project 4</div>
    </div>
  </div>
  <div class="project-name-block">
    <div class="project-name-title">Project 5
      <img src="http://optimumwebdesigns.com/eslich/icons/add-icon.png" alt="View Demolition and Wrecking Projects" class="add-icon">
    </div>
    <div class="project-name-block-container">
      <div class="project-name-description">This is the text for Project 5</div>
    </div>
  </div>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题