Javascript Onclick slide切换div以打开幻灯片_Javascript_Jquery_Html

Javascript Onclick slide切换div以打开幻灯片

javascript jquery html

Javascript Onclick slide切换div以打开幻灯片,javascript,jquery,html,Javascript,Jquery,Html,我有一个页面，当用户单击标题时，下面的div切换显示我想说，如果有任何其他div是display:block，那么首先将它们设置为display none 我想也许我可以这样做，但我认为我在错误的背景下使用了它。代码没有做任何有价值的事情 HTML: <div id="recordbox" class="home" style="z-index: 2; background: #f2f2f2;"> <div class="jlkb"></div&g

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

我想说，如果有任何其他div是display:block，那么首先将它们设置为display none

我想也许我可以这样做，但我认为我在错误的背景下使用了它。代码没有做任何有价值的事情

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>

它起作用了

这是代码

<!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>


$（文档）.ready（函数（）{
$（“.jlmain”）。解除绑定（“单击”）；
$（“.jlmain”）。单击（函数（）{
console.log（'here'）；
$（this.find（“.jlright li”）.toggleClass（“jlmain1”）；
$（this.find（“.jldetail”）.slideToggle（“fast”）；
});
});
标题
存款金额: 10点
2016-09-21 18:39:02

充值方式：在线订单号：20160921183902323
状态：待支付

Np。随时打电话给我。：）

<!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>