javascript - 如何在打开另一个div的同时关闭div

Question

    <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该怎么办？

实际输出

Answer 1

我认为除了必须打开的元素之外，您可以隐藏具有属性 toggle 的所有元素。

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

演示:Fiddle