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

标签 javascript jquery html

我有一个页面,当用户单击标题时,以下 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/

相关文章:

javascript - ContentEditable - 获取当前字体颜色/大小

javascript - 将文本框值附加到表单操作 URL

javascript - 在提交表单之前检查是否选择了输入 radio ID

javascript - 简单的 jQuery 选择器不起作用

javascript - 使用 php 中的单选按钮从 MS SQL SERVER 中删除行

javascript - 在 ASP.NET 中动态更改单选按钮选择上的表格单元格

javascript - Wscript.shell.run 和 Wscript.shell.exec 不显示相同的输出

javascript - jQuery every() 或 (this) 用于显示/隐藏切换

javascript - Vue.JS - 主要布局组件和路由

jquery - 将元素滚动到可滚动容器中的 View 中