jquery按钮滑动切换隐藏内容和图像切换
jquery button slide toggle hidden content and image switch
我浏览了其他与我有类似问题的人以前的帖子,并设法达到了我满意的程度,唯一的问题是我无法根据隐藏内容的打开状态来替换我的图像。
我有多个案例研究,每个都有隐藏的内容,当你点击任何按钮时,它都会滑动打开该特定案例研究的隐藏内容,并关闭任何其他打开的内容。
当前状态的页面可以在此处看到。
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);
}
});
相关文章:
- mouseOver上的隐藏图像问题
- 如何在运行时使用javascript隐藏图像
- 在鼠标悬停处隐藏图像
- 图像未正确隐藏
- 显示生成的gif;base64图像使用C#代码隐藏在img中使用JavaScript
- 如果没有历史记录,我如何隐藏图像或按钮onclick=;历史.go(-1);
- js:如何隐藏/加密图像的src
- ImageMapster可以动态显示和隐藏图像选择崩溃
- 谷歌地图加载后隐藏加载图像
- 有没有一种方法可以为卸载的lazylod图像隐藏alt标签
- CSS Html使图像显示在单选按钮的选项上(单选按钮被CSS隐藏)
- 加载直到图像准备好,而图像隐藏直到它准备好
- 当背景图像隐藏时,表格中没有边框
- 图像隐藏和显示在文本上悬停在一个页面上使用多个图像/链接
- 将图像隐藏后显示
- 我如何使一个图像隐藏在点击并播放隐藏在它下面的视频
- 我如何使图像隐藏在鼠标显示
- 如何通过点击图像显示/隐藏文本将其转为图像“隐藏”
- 加载图像隐藏可见效果使用javascript和CSS
- “图像隐藏于”复选框