1 {代码...} 点击1号a时显示出1号a下面对应的div，点击2号a时显示出2号a下面对应的div

Home > Q&A > body text

javascript - 求助，多个同名对象遍历绑定同一事件

    <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中文网2818 days ago707

reply all(3)I'll reply

黄舟2017-04-10 18:01:53

$("a").on("click",function(){
    $(this).find("p").show();
    $(this).siblings("a").find("p").hide()
})

巴扎黑2017-04-10 18:01:53

$("a").on("click",function(){
    $('.dd').hide();
    $(this).next().show();
})

迷茫2017-04-10 18:01:53

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

Cancelreply