在切换之间交换图标图像

Question

我有两个不同的图标，一个减号和一个加号。页面加载后，所有 .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>

Answer 1

将 opened class 添加到标题而不是内容，然后您可以使用 show/hide 使用 css 相关图标：-

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

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

此外，您需要为每个而不是第一个添加减号图像。

$('.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;
});

#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%;
}

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

在切换之间交换图标图像

Interchanging icon images between a toggle

javascript

css

jquery

toggle