切换使用百叶窗效果
有没有办法更改此脚本以用作 jQuery 百叶窗效果?
// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide
// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='';
var hideText='';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' <a href="#" class="toggleLink">'+showText+'</a>');
// hide all of the elements with a class of 'toggle'
$('.toggle').hide();
// capture clicks on the toggle links
$('a.toggleLink').click(function() {
// switch visibility
is_visible = !is_visible;
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');
// return false so any link destination is not followed
return false;
});
});
FYI-
Where it says:
var showText='';
var hideText='';
It was originally:
var showText='Show';
var hideText='Hide';
我删除了显示/隐藏文本,因为我将链接应用到文本的不同区域。我喜欢“盲”效果,而不是“切换”效果,并且需要知道如何应用它(如果可能)。我找不到允许将链接应用到任何文本(而不是按钮或静态文本)的基本盲效果脚本。
Is there a way to alter this script to be used as the jQuery blinds effect?
// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide
// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='';
var hideText='';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' <a href="#" class="toggleLink">'+showText+'</a>');
// hide all of the elements with a class of 'toggle'
$('.toggle').hide();
// capture clicks on the toggle links
$('a.toggleLink').click(function() {
// switch visibility
is_visible = !is_visible;
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');
// return false so any link destination is not followed
return false;
});
});
FYI-
Where it says:
var showText='';
var hideText='';
It was originally:
var showText='Show';
var hideText='Hide';
I deleted the Show/Hide Text because I am applying the link to different areas of text. I like the Blind effect, vs. this Toggle effect, and need to know how to apply it, if possible. I cannot find a basic Blind effect script that allows the use of applying the link to ANY text, vs. a button or static text.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我似乎已经明白了,DUH!通过更改以下行中的 1 个单词:
更改为:
简单更改:
.toggle
到.slideToggle
我还完全删除了不需要的行:
最初是这样说的:
因为我想应用链接来激活各种文本的隐藏 DIV。
还删除了与此相关的另一行:
返回使其成为滑动效果[直接向下/向上滑动与从顶部/左上角进入/退出]:
在我发现将
.toggle
更改为.slideToggle
可以解决问题后,我将行替换为:而不是:
现在我可以控制速度,这使得以获得更顺畅的滑动。
对于 HTML,只需将“toggleLink”类应用于任何带有 href="#" 的链接即可。对于隐藏的 DIV,应用“toggle”类。
I seemed to have figured it out, DUH! By changing 1 word in the following line:
Changed to this:
Simply changed:
.toggle
to.slideToggle
I also deleted the unneeded lines completely:
Which originally said:
because I wanted to apply the link to activate the hidden DIV to various text.
Also deleted the other line associated with this:
Back to making this a Sliding effect [Straight slide down/up vs. coming in/out from top/left corner]:
After I figure out that changing
.toggle
to.slideToggle
did the trick, I then replaced the line to read:instead of:
Now I have control over the speed, which makes for a smoother slide.
For the HTML, simply apply a class "toggleLink" to any link with the href="#". For the hidden DIV, apply the class "toggle".