简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 求助，多个同名对象遍历绑定同一事件
PHP中文网
PHP中文网 2017-04-10 17:59:53
0
3
695

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

reply all(3)
黄舟
黄舟2017-04-10 18:01:53 3 floor 
$("a").on("click",function(){
    $(this).find("p").show();
    $(this).siblings("a").find("p").hide()
})
Like +0
Add Reply
巴扎黑
巴扎黑2017-04-10 18:01:53 2 floor 
$("a").on("click",function(){
    $('.dd').hide();
    $(this).next().show();
})
Like +0
Add Reply
迷茫
迷茫2017-04-10 18:01:53 1 floor 
<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>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！