草庐IT

javascript - 单击 slidetoggle div 以打开幻灯片

coder 2023-08-12 原文

我有一个页面，当用户单击标题时，以下 div 会切换显示。

我想以某种方式说明是否有任何其他 div 显示: block 然后将它们设置为不显示。

我想也许我可以这样做，但我认为在错误的上下文中使用它。代码没有做任何有值(value)的事情。

HTML:

<div id="recordbox" class="home" style="z-index: 2; background: #f2f2f2;">
        <div class="jlkb"></div>
            <div id="recordlist">
                <div class="jlmain j1">
                    <div class="jlhead">
                        <div class="jlleft">
                        <li>存款金额: 10.00</li>
                        <a>2016-09-21 18:39:02</a>
                        </div>
                        <div class="jlright">
                        <li class=""></li> 
                        </div>
                    </div>
                        <div class="jldetail" style="display:none">
                        <p>充值方式：在线订单号：20160921183902323</p>
                        <p>状态：待支付</p>
                        </div>
                </div>
             </div>

    </div>

JQUERY:

function BindList() {
        $(".jlmain").unbind("click");
        $(".jlmain").click(function () {
            $(this).find(".jlright li").toggleClass("jlmain1");
            $(this).find(".jldetail").slideToggle("fast");
        })
    }

最佳答案

有效。

这是代码。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $(".jlmain").unbind("click");
        $(".jlmain").click(function () {
            console.log('here');
            $(this).find(".jlright li").toggleClass("jlmain1");
            $(this).find(".jldetail").slideToggle("fast");
        });
});
</script>
</head>
<body>
<div id="title">Title</div>
<div id="recordbox" class="home" style="z-index: 2; background: #f2f2f2;">
        <div class="jlkb"></div>
            <div id="recordlist">
                <div class="jlmain j1">
                    <div class="jlhead">
                        <div class="jlleft">
                        <li>存款金额: 10.00</li>
                        <a>2016-09-21 18:39:02</a>
                        </div>
                        <div class="jlright">
                        <li class=""></li> 
                        </div>
                    </div>
                        <div class="jldetail" style="display:none">
                        <p>充值方式：在线订单号：20160921183902323</p>
                        <p>状态：待支付</p>
                        </div>
                </div>
             </div>

    </div>

</body>
</html>

关于javascript - 单击 slidetoggle div 以打开幻灯片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39628943/

幻灯slidetoggle34ltgtjavascriptjqueryhtml

有关javascript - 单击 slidetoggle div 以打开幻灯片的更多相关文章

  1. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  2. ruby - 如何通过 Rubocop 指示打开 & :read as argument to File. - 2

    我有这个代码File.open(file_name,'r'){|file|file.read}但是Rubocop发出警告:Offenses:Style/SymbolProc:Pass&:readasargumenttoopeninsteadofablock.你是怎么做到的？ 最佳答案 我刚刚创建了一个名为“t.txt”的文件，其中包含“Hello,World\n”。我们可以按如下方式阅读。File.open('t.txt','r',&:read)#=>"Hello,World\n"顺便说一下，由于第二个参数的默认值是'r'，所以这样

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby - 从 Rakefile 打开 Vim？ - 2

    我正在为个人笔记创建一个日志应用程序，并且在我的Rakefile中包含以下内容:task:newdoentry_name="Entries/#{Time.now.to_s.gsub(/[-\:]+/,'.').gsub(/.0500+/,'')}.md"`touch#{entry_name}``echo"#$(date)">>#{entry_name}`end我想包括的最后一部分是Vim文本编辑器的打开，但我不知道如何打开它，就像我直接从bash终端调用它一样。我试过:vim#{entry_name}但不幸的是，我认为它们都将其作为后台进程打开。我一直在引用“6WaystoRunShe

  5. ruby - 强制浏览器下载文件而不是打开文件 - 2

    我要下载http://foobar.com/song.mp3作为song.mp3，而不是让Chrome在其native中打开它浏览器中的播放器。我怎样才能做到这一点？ 最佳答案 您只需要确保发送这些header:Content-Disposition:attachment;filename=song.mp3;Content-Type:application/octet-streamContent-Transfer-Encoding:binarysend_file方法为您完成:get'/:file'do|file|file=File.

  6. ruby-on-rails - 尝试打开 .gitignore 以在文本编辑器中对其进行编辑，但在 OS X Mountain Lion 上找不到文件位置 - 2

    我使用“newapp_name”创建了一个新的Rails应用程序，我正在尝试编辑.gitignore文件，但在我的应用程序文件夹中找不到它。我在哪里可以找到它？我安装了Git。 最佳答案 .gitignore位于项目的root中，而不是app子目录中。首先打开终端并进入您的目录。您需要使用ls-a来显示stash文件。然后使用打开.gitignore 关于ruby-on-rails-尝试打开.gitignore以在文本编辑器中对其进行编辑，但在OSXMountainLion上找不到文件位

  7. ruby-on-rails - 如何从按钮或链接单击的 View 调用 Rails 方法 - 2

    基本上，我试图在用户单击链接(或按钮或某种类型的交互元素)时执行Rails方法。我试着把它放在View中:但这似乎没有用。它最终只是在用户甚至没有点击“添加”链接的情况下调用该函数。我也用link_to试过了，但也没用。我开始认为没有一种干净的方法可以做到这一点。无论如何，感谢您的帮助。附言。我在ApplicationController中定义了该方法，它是一个辅助方法。 最佳答案 View和Controller是相互独立的。为了使链接在Controller内执行函数调用，您需要对应用程序中的端点执行ajax调用。该路由应调用rub

  8. ruby - 使用 File.open 从 ruby​​ 中的目录打开文件 - 2

    我是Ruby的新手，我正在尝试以如下方式打开文件:#!/usr/bin/envrubydata_file='~/path/to/file.txt'file=File.open(data_file,'r')但是我得到“没有这样的文件或目录”(该文件确实存在于该目录中)。如果我将该文件路径作为命令行参数，它会起作用，例如:#!/usr/bin/envrubyfile=File.open(ARGV[0],'r')然后从命令行运行，如:rubyscript.cgi~/path/to/file.txt关于如何让它以第一种方式工作的任何想法？ 最佳答案

  9. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  10. ruby-on-rails - 如何在 vim 编辑器中使用 bundler 打开 gem 源代码 - 2

    尝试使用bundleopen命令打开gem源代码，accordingtoofficialdocumentationandinstruction.因此，我在.profile中导出编辑器:exportBUNDLER_EDITOR=viexportEDITOR=vi并尝试打开例如rails使用控制台的源代码:bundleopenrails出现错误CouldnotlocaleGemfile[ruby-2.1.1][~/]$:rails-vRails4.0.3[ruby-2.1.1][~/]$:bundle-vBundlerversion1.5.3[ruby-2.1.1][~/]$:bundle

随机推荐