javascript - 如何在用户单击第二个下拉菜单时关闭第一个下拉菜单？

Question

我在单个页面中使用 2 个 codrops dropdwon 菜单。我想在用户点击第二个下拉菜单时关闭第一个下拉菜单。

我在我的项目中使用以下代码。

<select id="Select1" class="cd-select">
    <option value="-1" selected>Menu 1</option>
    <option value="7" >subMenu1</option>
    <option value="8" >subMenu2</option>
    <option value="9" >subMenu3</option></select>

// 2nd Menu
<select id="Select2" class="cd-select">
    <option value="-1" selected>Menu 2</option>
    <option value="2" >subMenu1</option>
    <option value="5" >subMenu2</option></select>

.aspx 页面 Java 脚本

<script type="text/javascript">
    $(function () {
        $('#Select1').dropdown({
            gutter: 5,
            stack: false,
            delay: 100,
            slidingIn: 100
        });
        $('#Select2').dropdown({
            gutter: 5,
            stack: false,
            delay: 100,
            slidingIn: 100
        });
    });
</script>

我想在用户点击 Select2 时关闭 Select1。请给我建议如何做到这一点。

• JSFiddle here

Answer 1

看起来插件没有任何 onclick 事件选项，所以如果您将以下代码添加到加载事件:

$('.cd-dropdown').click(function() {
    $('.cd-active').not($(this))
            .removeClass('cd-active')
            .children('ul').css('height', 'auto')
            .children('li').css('top', 0);
});

它会在您点击时切换打开和关闭。

然而，您随后需要更改脚本文件，因为它使用的是 opened 标志，我们无法对此产生影响，因此请搜索 _initEvents 并将其添加为this.selectlabel.on 函数中的第一行:

self.opened = self.dd.hasClass('cd-active');

It should all then work! Click for example