什么错这个jQuery脚本?

所以我试着去申请一个基本的点击显示隐藏元素,但由于某种原因,它没有采取任何影响

IM通过一个外部JavaScript文件中使用它,包括最新的jQuery库既包括在我的母版页萤火显示了代码,所以我知道它捡起来

继承人的代码我用尽

$(document).ready(function () { // hides the divx as soon as the DOM is ready $('#ecom').hide(); // shows the div on clicking the noted link $('.eco').click(function () { $('#ecom').show('slow'); return false; }); // hides the div on clicking the noted link $('.eco').click(function () { $('#ecom').hide('fast'); return false; }); });

HTML

<h2 class="eco">Ecommerce Web Design</h2> <div id="ecom">content</div>

我没有看到自己的问题

这是我用到底的解决方案做什么,我想要它做的:)三江源所有的答案太

$(document).ready(function () { $('#ecom').hide(); $('.eco').click(function () { $('#ecom').toggle('slow'); return false; });

--------------解决方案-------------

这两种处理器将火在同一时间。

我认为你正在寻找.toggle()

示例:http://jsfiddle.net/patrick_dw/uuJPc/

$('.eco').toggle(function () {
$('#ecom').show('slow');
return false;
},function () {
$('#ecom').hide('fast');
return false;
});

现在,它会点击之间切换。



编辑:如果你使用.toggle()在@Tgr下面提到的方式,你会需要一些方法来区分的"slow"/"fast"你必须在你的代码。

这里有一种方法:

示例:http://jsfiddle.net/patrick_dw/uuJPc/1/

$('#ecom').hide();
$('.eco').click(function () {
var i = 0;
return function() {
$('#ecom').toggle(i++ % 2 ? 'slow' : 'fast');
return false;
};
}());

或者是这样的:

示例:http://jsfiddle.net/patrick_dw/uuJPc/2/

$('#ecom').hide();
$('.eco').click(function () {
var ec = $('#ecom');
ec.toggle(ec.is(':visible') ? 'slow' : 'fast');
return false;
});

您可以使用toggle而不用手动做这件事,但是这是排序的快捷方式。 如果你想了解这种东西,我建议从头创建它,只有使用快捷键时,你会觉得自己完全明白这是怎么回事幕后。

$(document).ready(function(){
// Hide ``#ecom`` on page load.
$('#ecom').hide();
// Attach only one click handler (yours was attaching a handler that showed
// the div and then on that hid the div, so it was always shown, and then
// hidden instantly, therefore canceling your intended effect.
$('.eco').click(function(e){
// ``preventDefault()`` is the W3 correct way to stop event propagation
// and works cross-browser. It's a bound method on all DOM events.
// Notice I've given my click handler function an argument ``e``. When
// you register an event handler function, the event that causes the
// handler function to be called is provided as the first argument handler
// function, thus giving us ``e`` as a local reference to the event.
e.preventDefault();
// Use ``is()`` to compare the element against the ``:hidden`` selector.
// This will tell us if it's hidden or not.
if($('#ecom').is(':hidden'))
{
$('#ecom').show('slow');
} else {
$('#ecom').hide('fast');
}
});
});

分类:JavaScript的 时间:2015-03-14 人气:0
本文关键词: JavaScript的,jQuery的
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 1.514 (s). 10 q(s)