[英]Getting my head around jQuery
OK, I'm designing a site and thought I'd stick some jQuery in as I really need so js experience. 好吧,我正在设计一个网站,并认为我会坚持一些jQuery,因为我真的需要这样的经验。
Page with my problem is here: http://new.focalpix.co.uk/moreinfo.php 有问题的页面在这里: http : //new.focalpix.co.uk/moreinfo.php
JS in question is: 有问题的JS是:
$(document).ready(function(){
$(".answer").css("display","none");
$("#maincontent a.animate").click(function() {
$("#maincontent .answer").slideUp('slow');
var id = $(this).attr('href');
$(id).slideDown('slow');
return false;
});
});
This works fine, but if you click on a link where the answer has already slid down, then it slides up, then back down again. 这样可以正常工作,但是如果您点击答案已经滑落的链接,那么它会向上滑动,然后再次向下滑动。
I'm not sure on the cleanest way to stop this happening - any ideas? 我不确定以最干净的方式阻止这种情况发生 - 任何想法?
You should be using the .slideToggle() effect. 您应该使用.slideToggle()效果。
$(document).ready(function() {
$(".answer").css("display","none");
$("#maincontent a.animate").click(function() {
$("#maincontent .answer").slideToggle('slow');
});
});
First, I'd suggest the following structure for your faq's: 首先,我建议您的常见问题解答的结构如下:
<div id="faq">
<div class="qa" id="faq_greenandflies">
<span class="q">What is <a href="#faq_greenandflies">green and flies</a></span>
<div class="a">
Super Pickle!
</div>
</div>
<div class="qa" id="faq_redandbadforteeth">
<span class="q">What is <a href="#faq_redandbadforteeth">Red and bad for your teeth</a></span>
<div class="a">
a Brick
</div>
</div>
<!--
More FAQ's here
-->
</div>
and then defining your jQuery as follows: 然后按如下方式定义jQuery:
<script type="text/javascript">
$(function(){
// hide all answers
$('div#faq .qa .a').hide();
// bind a click event to all questions
$('div#faq .qa .q a').bind(
'click',
function(e){
// roll up all of the other answers (See Ex.1)
$(this).parents('.qa').siblings().children('.a').slideUp();
// reveal this answer (See Ex.2)
$(this).parents('.qa').children('.a').slideDown();
// return true to keep any other click events
return true;
});
// check location.hash to see if we need to expand one (direct link)
$(location.hash).find('.q a').click();
});
</script>
Explanation: 说明:
(Ex.1) (实施例1,)
(Ex.2) (例2)
A working demo is here . 一个工作演示是在这里 。
This does several things for you: 这为你做了几件事:
Use slideToggle() like Soviut said, but just as a tip -- you can declare the display property in the actual CSS file instead of declaring it inside the javascript. 像Soviut说的那样使用slideToggle(),但就像一个提示 - 你可以在实际的CSS文件中声明display属性,而不是在javascript中声明它。 jQuery will pick up on the fact that it is hidden in the stylesheet and still perform the appropriate slide function.
jQuery将了解它隐藏在样式表中并仍然执行适当的幻灯片功能。
You can also use $(".answer").hide();
你也可以使用
$(".answer").hide();
Instead of setting the display CSS property. 而不是设置显示CSS属性。 Just thought I would let you know.
我想我会告诉你的。
try using the one method, something like: 尝试使用一种方法,如:
$(selector).one('effect', 'data for effect', callback function);
it makes sure an effect only happens once per element. 它确保每个元素只发生一次效果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.