jquery按钮滑动切换隐藏内容和图像切换

jquery button slide toggle hidden content and image switch

本文关键字:图像 隐藏 按钮 jquery      更新时间:2023-09-26

我浏览了其他与我有类似问题的人以前的帖子,并设法达到了我满意的程度,唯一的问题是我无法根据隐藏内容的打开状态来替换我的图像。

我有多个案例研究,每个都有隐藏的内容,当你点击任何按钮时,它都会滑动打开该特定案例研究的隐藏内容,并关闭任何其他打开的内容。

当前状态的页面可以在此处看到。

HTML

<!-- BLOCK 1 -->
        <div class="serviceblock ten2 columns2">
            <div class="image">
                <img src="images/one.png" alt="1 - Personal Planning" />
            </div>
            <div class="text">
                <h4>Personal planning</h4>
                <p>We achieve a more intimate understanding of our clients than anybody else, because we provide empathy and discretion, and devote more time to personal planning than anybody else. It is at this stage that we help our clients to express, and build their vision of the future with absolute clarity.</p>
            </div><!-- END TEXT -->
            <div class="hiddenTextWrapper fourteen2 columns2">
                <a href='#' class='toggleswitch'><img src='images/switchup.png' alt='' /></a>   
                <!-- HIDDEN TEXT -->
                <div class="hiddenText">
                    <h5>The Life Audit</h5>
                    <p>The Life Audit is a comprehensive and strictly confidential discussion of a client’s current circumstances, covering not just their existing banking relationships and assets, but all of the personal details that affect their wealth ambitions. These include their business interests, their family interests, the locations in which they operate, their world view and their risk appetite.</p>
                    <p>For our clients, the life audit has two main benefits: Firstly, it is so in-depth that it ensures that we, their advisors, understand them intimately enough to act as their proxy, leading to a more tailored service style and more fitting recommendations than they would experience anywhere else.</p>
                    <p>Secondly, the process of talking in a structured way about the things that matter most often helps the client to hone and refine their vision for the future, as well as to identify new goals and ambitions.</p>
                </div><!-- END HIDDEN TEXT -->
            </div><!-- END HIDDEN TEXT WRAPPER -->
        </div><!-- END SERVICEBLOCK -->

Jquery

$(document).ready(function () {
var minusImg = "images/switchup.png";
var plusImg = "images/switchdown.png";
$(".toggleswitch").on('click', function () {
    var $ans = $(this).next(".hiddenText");
    $ans.slideToggle();
    $(".hiddenText").not($ans).slideUp();
    event.preventDefault(); 
    }); 
});
$("a.toggleswitch").click(function(){
   $(".hiddenText").slideToggle();
   var plusImg = "images/switchup.png";
   var minusImg = "images/switchdown.png";        
   $this = $(".toggleswitch img");            
   if( $this.attr('src') == plusImg ) { $this.attr('src', minusImg);} 
   else { $this.attr('src', plusImg); }
   });

不太擅长Jquery,也不擅长java,但我非常愿意学习我在哪里出错来纠正这一点。提前感谢各位。

您没有选择范围内的图像,因此可以获得所有图像,也没有使用var初始化变量,因此它成为全局变量。试试这个:

$("a.toggleswitch").click(function(){
   $(".hiddenText").slideToggle();
   var plusImg = "images/switchup.png";
   var minusImg = "images/switchdown.png";        
   var $img = $(this).find("img");            
   if( $img.attr('src') === plusImg ) { 
     $img.attr('src', minusImg);
   } else { 
     $img.attr('src', plusImg); 
   }
});