javascript - 在可点击的文本上表达积极和消极

Question

我使用了下面的代码，它允许我根据用户点击标题来展示数据，但我试图在它旁边添加一个正面图像，这很容易完成，但是当用户点击标题并且数据是显示想显示negative.png，当他们再次点击隐藏数据时，我想显示positive.png

代码

 <div >
        <div class="layer1">
            <p class="heading">To view report fields click here</p>
                <div class="content" >
                     <table>
                        <tr>
                            <th>Name</th>
                        </tr>
                        <tr>
                            <td><h4>Gender</h4></td>
                        </tr>
                        <tr>
                            <td><h4>Percentage</h4></td>
                        </tr>
                    </table>   
                </div> 
         </div>
     </div>

CSS 代码

.layer1 {
margin: 0;
padding: 0;
width: auto;
}

.heading {
margin: 1px;
color:Black;
font-family:Arial;
font-weight:bold;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#C0C0C0;
}
.content {
padding: 5px 10px;
background-color:#fafafa;
}

JavaScript 代码

jQuery(document).ready(function () {
     jQuery(".content").hide();
     //toggle the componenet with class msg_body
     jQuery(".heading").click(function () {
         jQuery(this).next(".content").slideToggle(400);
     });
 })

Answer 1

使用toggleClass. 编写不同的类来切换

jQuery(document).ready(function () {
     jQuery(".content").hide();
     //toggle the componenet with class msg_body
     jQuery(".heading").click(function () {
         jQuery(this).next(".content").slideToggle(400);
         jQuery(this).toggleClass("collapse");
     });
 })

演示

关于toggleClass的更多解释