Question

当用户点击链接以展开其上的连接时，是否可以交换图像。

<ul class="accor">
    <li> Item 1 <img src="../plus.png">
      <p> Lorem ipsum dolor sit amet</p>
    </li>
</ul>

$('.accor li').click(function() { 
    $(this).find('p').slideToggle('fast');
})

Answer 1

你可以只使用css：

img {
    opacity: 1;
}

img:hover {
    opacity: 0;
}

当不透明度设置为0时，图像变为隐藏状态，这样您就可以看到段落的文本。

Answer 2

您可以更改图像的src属性值。或者您可以将这些图像显示为背景。然后，您可以通过更改班级来切换这些图像。

您可以按如下方式更改src属性的值;

$('img').attr('src', 'newImageUrl');

否则，您可以按如下方式制作背景图像;

式;

.icon {
  display: inline-block;
}

.first-image {
  background: url('../plus.png');
  width: 20px;
  height: 20px;
}

.second-image {
  background: url('../image-2.png');
  width: 20px;
  height: 20px;
}

顺便说一下;您需要通过图像更新这些类的高度和宽度值。

HTML;

<ul class="accor">
    <li> Item 1 <span class="icon first-image"></span>
      <p> Lorem ipsum dolor sit amet</p>
    </li>
</ul>

使用上一个解决方案，您需要使用javascript更改类;

$('.accor li').click(function() { 
  var $icon = $(this).find('.icon');

  if ($icon.hasClass('first-image') {
    $icon.removeClass('first-image').addClass('second-image');
  } else {
    $icon.removeClass('second-image').addClass('first-image');
  }

  $(this).find('p').slideToggle('fast');
});

我希望这有效。

Answer 3

要达到预期效果，请使用以下选项

HTML：

<ul class="accor">
    <li> Item 1 <img src="http://www.w3schools.com/css/img_fjords.jpg">
      <img src="http://www.w3schools.com/css/img_forest.jpg" width="60px" height="60px" style="display:none"/>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </li>
</ul>

CSS：

img{
  width:100px;
  height:100px
}

JS：

$('.accor li').click(function()
    { 
        $(this).find('p').slideToggle('fast');
         $(this).find('img').toggle();
    })

Codepen - http://codepen.io/nagasai/pen/kXvdyQ

如何交换图像

3 个答案: