javascript - JQ 点击隐藏显示

问题描述

问 题

<div class="div1">
    <ul>
    </ul>
    <div class='div2'></div>
</div>
<div class="div1">
    <ul>
    </ul>
    <div class='div2'></div>
</div>

点击div1，让div2显示，点下一个div1,让第一个div2隐藏，第二个div2显示，
怎么实现啊

解决方案

HTML:

<div class="div1">
    <ul></ul>
    <div class='div2'></div>
</div>
<div class="div1">
    <ul></ul>
    <div class='div2'></div>
</div>

CSS:

.div1 {
    width: 50px;
    height: 50px;
    background: yellow;
}
.div2 {
    width: 40px;
    height: 40px;
    background: red;
    display: none;
}

jQuery:

    $('.div1').click(function () {
       $(this).find('.div2').show()
               .end()
               .siblings('.div1').find('.div2').hide();
    });

仅仅想装B的用链式代码，写法可能有点拖沓。见谅。支持 scort 的写法。

这篇关于javascript - JQ 点击隐藏显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！