尝试将我的 jquery 箭头 img 更改为 Hide/Show 内容上的不同箭头

Question

我有这个很简单JQuery

$(document).ready(function() {
  $(".neverseen img").click(function() {
    $(".neverseen p").slideToggle("slow");
    return false;
  });
});

还有这个HTML

<div class="neverseen">
  <h1>Title to always show</h1>
  <a href="#" id="show">
    <img src="images/demo/arrow.png" width="40" height="40">
  </a>
  <p>Text to toggle hide/show</p>
</div>

所以我需要添加另一个名为 arrow2.png 的图像，当隐藏内容激活或使当前箭头旋转 180 度时，它将替换第一个箭头。我尝试了不同的 jquery 方法，但似乎没有什么效果很好。

我希望的另一件事是有一个 border-bottom 始终可见并随隐藏内容移动，因此无论我在做什么，边框都在隐藏的标题下方和可见的内容下方这里导致双边框。

Answer 1

使用 jQuery 的原生 .css() 函数的相当简单的过程。无需替换为完全不同的图像

试试这个：

$(".neverseen img").click(function() {
    $(this).css("transform", "rotate(180deg)"); // rotate the image 180 degrees once it has been clicked
    $(".neverseen p").slideToggle("slow");

    return false;
});

编辑：为了获得连续的结果和底部边框，在你的jQuery中尝试这样的事情：

$(".neverseen img").click(function() {
    $(this).toggleClass("open");
    $(".neverseen p").slideToggle("slow");

    if($(this).hasClass("open")){
        $("h1").css("border-bottom", "none");
        $(this).css("border-bottom", "1px solid black");
    } else {
        $("h1").css("border-bottom", "1px solid black");
        $(this).css("border-bottom", "none");
    }

    return false;
});

然后，在你的 CSS 中：

h1{
    border-bottom: 1px solid black;
}
.neverseen img{
    transform: rotate(0deg);
    transition: transform 500ms; // rotate for 500 milliseconds
}
.open{
    transform: rotate(180deg);
}

Answer 2

您有不同的解决方案来实现这一点，这里是其中之一：

$(document).ready(function() {
  $(".neverseen img").click(function() {
   $(this).parent().toggleClass("active");
   $(".neverseen p").slideToggle("slow");
     return false;
    });
});

img {
  width: 50px;
}

#secondImage {
  display: none;
}

.active #firstImg {
  display:none;
}

.active #secondImage {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="neverseen">
<h1>Title to always show</h1>
<a href="#" id="show">
<img id="secondImage" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSWdFg2vU1YX0W8HGMurPjTOSsOf8rwadUWNwPV6I_7NsDJ3nnURSSzIcw" width="40" height="40">
 <img id="firstImg" src="https://image.freepik.com/free-icon/arrow-top-ios-7-interface-symbol_318-34757.jpg" alt="">
</a>
<p>
  Text to toggle hide/show <hr class="to-be-hidden">  
  </p> 
</div>

我建议你使用bootstrap collapse，真的很棒！

尝试将我的 jquery 箭头 img 更改为 Hide/Show 内容上的不同箭头

Trying to make my jquery arrow img change to different arrow on Hide/Show content

html

css

jquery

toggle