[英]JQuery show/hide or Toggle with an image + / -
Hi alle i have the fallowing code for the show and hide. 嗨,大家好,我有表演和隐藏的休闲代码。 But in my browsers theres nu plus or minus image. 但是在我的浏览器中,有nu正负图像。
$(window).ready(function() {
$('header').click(function() {
var text = $(this).children(' #bericht');
if (text.is(':hidden')) {
text.slideDown('200');
$('img', this).attr('src', 'images/icons/up.png').show(200);
} else {
text.slideUp('200');
$('img', this).attr('src', 'images/icons/down.png').show(200);
}
});
$('img', this).attr('src', 'images/icons/up.png').show(200);
});
});
This is my html code what i have. 这是我的html代码。
<section id="box-ui">
<header class="head-title">Test kopje<img class="toggle" src="images/icons/up.png" /></header>
<div id="bericht" class="berichtui">
<a href="#">Beetje tekst hier maar....?</a><br>
Beetje tekst hier maar....?<br>
Beetje tekst hier maar....?<br>
Beetje tekst hier maar....?<br>
Beetje tekst hier maar....?</div>
</section>
<section id="box-ui">
<header class="head-title">Test kopje<img class="toggle" src="images/icons/up.png" /></header>
<div class="berichtui">
Beetje tekst hier maar....?<br>
Beetje tekst hier maar....?<br>
Beetje tekst hier maar....?<br>
Beetje tekst hier maar....?<br>
Beetje tekst hier maar....?</div>
</section>
So what am i doing wrong people who can tell me ;) 所以我在做什么错的人谁可以告诉我;)
Only the current document has a ready event, the window does not. 只有当前文档具有ready事件,而窗口则没有。
In the last line of code where you're setting the source, this
is the window object ? 在设置源代码的最后一行中, this
是window对象吗?
The ID box-ui
is used twice, and so are some of the other ID's ? ID box-ui
被使用了两次,其他一些ID也被使用了吗?
Don't quote the speed for animation methods. 不要引用动画方法的速度。
You have also set the arrow image as the background. 您还已将箭头图像设置为背景。
$(document).ready(function () {
$('header').on('click', function () {
var section = $(this).closest('section'),
text = section.find('.berichtui'), // use classes, not ID
img = $(this).find('img'),
state = text.is(':hidden');
text[state?'slideDown':'slideUp'](200);
img.prop('src', function() {
return state ? 'images/icons/up.png' : 'images/icons/down.png';
});
});
$('.box-ui img').show(200);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.