Jquery 元素点击显示隐藏,手风琴效果

记录一下:jquery常用的手风琴效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/static/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
    .items {
        display: flex;
        border: 1px solid #eee;
        width: 200px;
        justify-content: space-between;
    }
</style>

<body>
    <div id="select">
        <div class="selectClick">
            <div class="items">
                <div>1111</div>
                <div class="btn">展开</div>
            </div>
            <div class="isshow">
                1111隐藏内容
            </div>
        </div>
        <div class="selectClick">
            <div class="items">
                <div>2222</div>
                <div class="btn">展开</div>
            </div>
            <div class="isshow">
                2222隐藏内容
            </div>
        </div>
        <div class="selectClick">
            <div class="items">
                <div>3333</div>
                <div class="btn">展开</div>
            </div>
            <div class="isshow">
                3333 隐藏内容
            </div>
        </div>
    </div>
</body>

</html>
<script>
    // 上来先隐藏所有
    $("#select .isshow").hide()
    $('#select .selectClick').click(function () {
        //获取当前点击tab的id
        var index = $(this).index();
        //点击某一项判断是否被打开
        if ($("#select .isshow:eq(" + index + ")").is(":visible") == false) {
            $("#select .btn:eq(" + index + ")").html('关闭')
            $("#select .isshow:eq(" + index + ")").show()
            $('#select .isshow').each(function (ind) {
                if (ind != index) {
                    $("#select .isshow:eq(" + ind + ")").hide()
                    $("#select .btn:eq(" + ind + ")").html('展开')
                }
            })
        } else {
            $("#select .isshow:eq(" + index + ")").hide()
            $("#select .btn:eq(" + index + ")").html('展开')
        }
    })
</script>

上一篇:c语言-//谁考了第k名


下一篇:关于传输线电感-磁力线