如何在打开另一个div时关闭div

时间:2013-06-13 06:19:56

标签: javascript jquery html

    <div id="select1" data="select">
    <span>Select Option</span>
</div>
<div toggle="select1" style="display: none">
    <table>
        <tr>
            <td valign="top" style="width: 165px">
                <input type="checkbox" name="vehicle" value="Bike" />
                option 1
            </td>
        </tr>
        <tr>
            <td valign="top" style="width: 165px">
                <input type="checkbox" name="vehicle" value="Car" />
                option 2
            </td>
        </tr>
        <tr>
            <td valign="top" style="width: 165px">
                <input type="checkbox" name="vehicle" value="dog" />
                option 3
            </td>
        </tr>
    </table>
</div>
<div id="select2" data="select">
    <span>Select Option</span>
</div>
<div toggle="select2" style="display: none">
    <table>
        <tr>
            <td valign="top" style="width: 165px">
                <input type="checkbox" name="vehicle" value="Bike" />
                option 1
            </td>
        </tr>
        <tr>
            <td valign="top" style="width: 165px">
                <input type="checkbox" name="vehicle" value="Car" />
                option 2
            </td>
        </tr>
        <tr>
            <td valign="top" style="width: 165px">
                <input type="checkbox" name="vehicle" value="dog" />
                option 3
            </td>
        </tr>
    </table>
</div>

Jquery

<script type="text/javascript">
    $(document).ready(function () {
        $('[data="select"]').click(function () {
            var selectdiv = $(this);
            $('[toggle="' + selectdiv.attr('id') + '"]').toggle(); ;
        })
    })
</script>

我已经完成了打开上面的div事件。如何在该事件中设置关闭已打开的div。还需要在点击div或div之外的任何动作时关闭div

如果我打开一个div需要关闭另一个div怎么做?

实际输出

enter image description here

1 个答案:

答案 0 :(得分:3)

我认为您可以使用属性toggle隐藏所有元素,但必须打开的元素除外。

$(document).ready(function () {
    $('[data="select"]').click(function () {
        var selectdiv = $(this);
        var el = $('[toggle="' + selectdiv.attr('id') + '"]').toggle(); ;
        $('[toggle]').not(el).hide()
    })
})

演示:Fiddle