javascript - 求助,多个同名对象遍历绑定同一事件
PHP中文网
PHP中文网 2017-04-10 17:59:53
0
3
699

1

    <p class="dd" style="display:none;">
    下拉框
     </p>
    <a href="" class="aa">2</a>
    <p class="dd" style="display:none;">
    下拉框
    </p>
    <a href="" class="aa">3</a>
    <p class="dd" style="display:none;">
    下拉框
    </p>
    <a href="" class="aa">4</a>
    <p class="dd" style="display:none;">
    下拉框
    </p>

点击1号a时显示出1号a下面对应的p,点击2号a时显示出2号a下面对应的p

PHP中文网
PHP中文网

认证高级PHP讲师

répondre à tous(3)
黄舟
$("a").on("click",function(){
    $(this).find("p").show();
    $(this).siblings("a").find("p").hide()
})
巴扎黑
$("a").on("click",function(){
    $('.dd').hide();
    $(this).next().show();
})
迷茫
<body>
    <p class="btn-wrap">
        <a href="" class="aa">1</a>
        <a href="" class="aa">2</a>
        <a href="" class="aa">3</a>
        <a href="" class="aa">4</a>
    </p>
    <p class="select-wrap">
        <p class="dd" style="display:none;">
            下拉框1
        </p>
        <p class="dd" style="display:none;">
            下拉框2
        </p>
        <p class="dd" style="display:none;">
            下拉框3
        </p>
        <p class="dd" style="display:none;">
            下拉框4
        </p>
    </p>
    <style type="text/css">
    .aa {
        display: block;
        width: 25px;
        height: 25px;
        line-height: 20px;
        background-color: #eee;
        text-align: center;
        color: #000;
        float: left;
    }

    .dd {
        width: 100px;
        height: 40px;
        background-color: #eee;
        position: absolute;
        top: 20px;
        left: 0;
        display: block;
        cursor: pointer;
    }

    .aa:hover,
    .dd:hover {
        background-color: #f55;
        color: #fff;
    }
    </style>
    <script>
    $(document).on('click', '.aa', function() {
        var $index = $(this).index();
        $('.dd').hide().eq($index).show();
        return false;
    });
    $(document).click(function() { //选中下拉框或点击空白区域收起下拉框
        $('.dd').hide();
    })
    </script>
</body>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal