Morgan Ng Morgan Ng - 2 months ago 22
HTML Question

Onclick slidetoggle div to open slide

I have a page that when a user clicks a title, the following div toggles display.

I want to somehow say if any other divs are display:block then set them to display none first.

I thought maybe I could do it this way but I think 'm using this in the wrong context. Code doesn't do anything worthwhile.

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");
})
}

Answer

It works.

Here is the code.

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