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()
    })
})

演示：小提琴