创建一个通用扰流盒(Creating a universal spoiler box)

$(document).ready(function(){
  $("#spoil").click(function(){
    $(this).toggle();
  });
});

我正在使用Jquery来创建一个扰流板或下拉框,所以你点击按钮,然后信息消失,然后当你再次点击它时,它会回来。 我正在计划有很多这样的产品,并且想知道如何改变我的代码,这样它就可以与所有不需要每次更改js的扰流盒一起工作。 谢谢

我只是在切换框的内容而不是它自己的按钮之后。


$(document).ready(function(){
  $("#spoil").click(function(){
    $(this).toggle();
  });
});

I am using Jquery to create a spoiler or drop down box so you click the button then the information disappears then when you click it again it comes back. I am planing on having many of these and was wondering how to transform my code so it would work with all the spoiler boxes with out needing to alter the js each time. Thank you

I am only after the content of the box being toggled not the button it self.

2023-02-05 17:02

满意答案

你的意思是

现场演示

$(function() {
    $(".toggle").on("click",function() {
        $(".toggled").toggle().removeClass("toggled");
        $(this).next(".spoiler").toggle().addClass("toggled");
    })
});

使用链接我会添加preventDefault:

$(function() {
    $(".toggle").on("click",function(e) {
        e.preventDefault(); // do not follow the link
        $(".toggled").toggle().removeClass("toggled");
        $(this).next(".spoiler").toggle().addClass("toggled");
    })
});

Do you mean

Live Demo

$(function() {
    $(".toggle").on("click",function() {
        $(".toggled").toggle().removeClass("toggled");
        $(this).next(".spoiler").toggle().addClass("toggled");
    })
});

Using a link I would add preventDefault:

$(function() {
    $(".toggle").on("click",function(e) {
        e.preventDefault(); // do not follow the link
        $(".toggled").toggle().removeClass("toggled");
        $(this).next(".spoiler").toggle().addClass("toggled");
    })
});

相关问答

更多

标签中带有BBCodes的BBCode扰流板(BBCode spoiler with BBCodes in the label)

尝试使用<button>标记而不是<input>标记。 它具有比<input>标签更多的功能,并且可以包含其他元素,如下所示: <button type="button">The third <span style="color:red">word</span> on this button is red.</button> Try using the <button> tag instead of the <input> tag. It has more capabilities than th...

在桌行的掠夺者与css选择器(Spoiler on table row with css selector)

<!DOCTYPE html> <html> <head> <script type="text/javascript"> function toggle_visibility(id){ var e = document.getElementById(id); if(e.style.display == 'none') e.style.display = 'block'; else ...

如何在github wiki页面中制作“spoiler”文本?(How to make “spoiler” text in github wiki pages?)

GitHub Flavored Markdown的文档没有提到扰流器,所以我怀疑它不支持。 这绝对不是原来的Markdown规范的一部分 。 The documentation for GitHub Flavored Markdown makes no mention of spoilers, so I suspect it's not supported. It's definitely not part of the original Markdown spec.

如何使用jQuery Spoiler(How to use a jQuery Spoiler)

我假设你在头部包含spoiler-init.js ,但是你的代码假设jQuery选择器在那个时候是有效的(它可能不是)。 尝试这个: (function($) { $(function () { //Equivalent to $(document).ready $(".spoiler").spoiler({ paddingValue: 20 }); }); })(jQuery); I'm assuming you're includin...

创建一个通用扰流盒(Creating a universal spoiler box)

你的意思是 现场演示 $(function() { $(".toggle").on("click",function() { $(".toggled").toggle().removeClass("toggled"); $(this).next(".spoiler").toggle().addClass("toggled"); }) }); 使用链接我会添加preventDefault: $(function() { $(".toggle"...

处理破坏者BBcode Android(Handling spoiler BBcode Android)

TextView不支持<span> , <object>和<button>标签。 有一个非官方的支持标签列表 。 对于[spoiler] bbcode,你可以渲染两个TextViews ,一个没有扰流板,一个没有扰流板。 然后添加一个按钮在两者之间切换。 JavaScript中的演示: var spoilerVisible = false; $('#toggleSpoiler').on('click', function () { spoilerVisible = !spoilerVisi...

什么是“通用应用”?(What is a “universal app”?)

在此上下文中,通用应用程序是指那些能够在服务器或客户端中呈现的Web应用程序,具体取决于具体情况。 有时也可以称为“同构应用程序”。 来自https://www.npmjs.com/package/webpack-isomorphic-tools的更完整的解释: 什么是网络应用程序? 我将它定义为一个带有一堆输入(键盘事件,鼠标事件)和显示作为输出的盒子。 用户走进您的网站,您的Web应用程序在其显示器上呈现“页面”。 起初,所有渲染都发生在服务器上。 但随后“AJAX”(2005年)出现了,它开...

扰流板中的代码块与降价(Code block in spoiler with markdown)

正如@Chris在评论中提到的那样, GitLab Flavored Markdown似乎没有提到支持“剧透”语法的任何内容(在!> )。 另外,“剧透”语法不是“官方”语法(也不是像@Chris指出的那样是围栏代码块)并且不常见。 就个人而言,我不知道任何特定的Markdown实现支持它。 也就是说,据我理解语法,它基本上是blockquote语法的扩展。 因此,如果你使用的实现支持破坏者,那么无论对blockquotes如何工作都应该适用于剧透。 需要注意的另一个问题是,并非所有Markdow...

相关文章

更多

A Great List of Windows Tools

Windowsis an extremely effective and a an efficient ...

She’s Not Carrying A Handbag

Gao Yuanyuan from after 2005 drama &quot; world fir ...

ServletOutputStream cannot be resolved to a type

在使用jsp生成web图片时遇到这个问题,这是源代码中的一条语句,源代码可以执行,可是一将源码放入ec ...

Book Report: THE SOUL OF A NEW MACHINE

Book Report: THE SOUL OF A NEW MACHINE Zhengdong Zh ...

每日英语:Man Without a Country

'I'm like a proud son of China,' Taiwan-born direct ...

[译文] 恶意软件行为综述 - A View on Current Malware Behaviors

A View on Current Malware Behaviors Ulrich Bayer ...

Spark - A Fault-Tolerant Abstraction for In-Memory Cluster Computing

http://spark-project.org/ 项目首页 http://shark.cs.berk ...

[转]So You Want To Be A Producer

pro-du-cer n. 1. Someone from a game publisher who ...

Becoming a data scientist

Data Week: Becoming a data scientist Data Pointed, ...

trouble is a friend

trouble will find you no matter where you go, oh ...

最新问答

更多

Python / IPython奇怪的不可重现列表索引超出范围错误(Python/IPython strange non reproducible list index out of range error)

你得到IndexError的原因是你的输入文件显然不是完全用制表符分隔的。 这就是为什么当您尝试访问它时, splits[1]没有任何内容。 您的代码可以使用一些重构。 首先,你正在重复使用if -checks,这是不必要的。 这只是将cds0到7个字符,这可能不是你想要的。 我将以下内容放在一起,以演示如何重构您的代码,使其变得更加pythonic和干燥。 我无法保证它能够与您的数据集一起使用,但我希望它可以帮助您了解如何以不同的方式执行操作。 to_sort = [] # W

故事板从表格单元中延伸出来并显示其详细信息披露按钮(storyboard segue from a tablecell an its Detail Disclosure Button)

我不认为你可以链接一个特定的细节披露按钮瓦特/赛格。 我的故事板是非常程序化的B / C我使用了很多定制CGRect等。 所以我倾向于使用这样的东西: -(void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath { [self performSegueWithIdentifier:@"ViewControllerIdentifer"

我们可以将Gherkin功能文件与testcomplete集成(Can we integrate Gherkin feature files with testcomplete)

TestComplete不支持Gherkin功能文件。 但是,TestComplete具有SDK,因此可以自己为此创建扩展。 TestComplete does not support Gherkin feature files. However, TestComplete has SDK so it is possible to create an extension for this by yourself.

TrustAllCertificatesCallback被忽略(TrustAllCertificatesCallback is ignored)

我没有做过这样的事情,但看看我认为可以看出错误的例子。 试试这个代码: static class Program { static void Main() { var tcpclient = new TcpClient("remote.example.com", 443); var tcpstream = tcpclient.GetStream(); var sslstream = new SslStream(tcpstream,

返回嵌套元素的索引(Return index of nested element)

您需要获取父li元素的索引。 否则,您将获得列表项内锚点的索引,该索引始终为零。 $(this.parentNode).index(); You need to get the index of the parent li element. Otherwise you are getting the index of the anchor inside the list item, which will always be zero. $(this.parentNode).index();

在数组中重新编号元素的有效方法(Efficient way of re-numbering elements in an array)

您需要多次迭代列表,我认为没有办法解决这个问题。 毕竟,在开始更改元素(第二遍)之前,首先必须确定不同元素的数量(第一遍)。 但是请注意,由于对index的重复调用而not in列表中具有O(n),因此可能具有最多O(n ^ 2)的不同元素的数量。 或者,您可以使用dict而不是value_map的list 。 字典比列表具有更快的查找速度,因此,复杂性应该确实在O(n)的数量级上。 您可以使用(1)字典理解来确定旧值到新值的映射,以及(2)用于创建更新子项的列表理解。 value_map =

Express app定义的`static`文件夹无法正常工作(Express app defined `static` folder not working properly)

选项1 你可以改变这一行: app.use( express.static(__dirname + '/puplic')); //my public folder. 至 app.use('/oneTime', express.static(__dirname + '/puplic')); //my public folder 选项2 我假设你在公共文件夹中有一个js文件夹,然后你需要更改你的HTML代码:

使用node.js和socket.io每秒广播一次(Using node.js and socket.io to broadcast every second)

对于计时器值,请在服务器端本身每秒更新本地计时器。 每当有任何用户进来时,给他这个值以及计时器的总值。 然后客户端将根据dandavis评论在本地启动自己的计时器,但在服务器端保留一些间隔,如15或10秒,服务器将广播当前计时器值,以便客户端相应地进行同步。 简而言之,服务器将每隔10(n:你决定)秒后广播,但它将在本地每秒更新定时器变量。 每当客户端进入时,它将获得总计时器值和当前计时器值。 广播当前出价的休息功能可以以正常方式完成。 For timer value, keep updatin

如何让XMLSerializer将命名空间添加到嵌套对象中的属性?(How do I get the XMLSerializer to add namespaces to attributes in nested objects?)

IXmlSerializable也许? 注意我还添加了(对A ): [XmlElement("A", Namespace = "http://www.example.com/namespace")] public TestSoapHeaderTypeValuePair A {...} 代码如下: public class TestSoapHeaderTypeValuePair : IXmlSerializable { private string _type; private