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 Page Java Script

<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>

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

的 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

Answer 2

这个答案适用于onchange事件 ..如果有人想要它

Fiddle Demo here

1）将Select1放在一个DIV中

2）为Select2

定义onOptionSelect函数

3）onOptionSelect事件隐藏了select1的DIV

Jquery的代码

$(function () {
    $('#Select1').dropdown({
        gutter: 1,
        stack: false
    });
    $('#Select2').dropdown({
        gutter: 1,
        stack: false,
        onOptionSelect :function(opt) { 

        $('#Select1Place').hide();    

        }
    });
});

对于HTML

<div>
        <div style='float:left;width:250px;'>
            <div id="Select1Place"><!-- New DIV for holding position of select-->
<select id="Select1"  name="cd-dropdown" class="cd-select">
    <option value="-1" selected>The drop down menu</option>
    <option value="1" class="icon-monkey">Choice 1</option>
    <option value="2" class="icon-bear">Choice 2</option>
    <option value="3" class="icon-squirrel">Choice 3</option>
    <option value="4" class="icon-elephant">Choice 4</option>
</select>
            </div>
    </div>
    <div style='float:left;width:150px;padding-top:170px;'>
<select id="Select2" name="cd-dropdown" class="cd-select">
    <option value="-1" selected>The drop down menu</option>
    <option value="1" class="icon-monkey">Choice 1</option>
    <option value="2" class="icon-bear">Choice 2</option>
    <option value="3" class="icon-squirrel">Choice 3</option>
    <option value="4" class="icon-elephant">Choice 4</option>
</select>
    </div>
</div>

Answer 3

这将在单击第二个选择器时隐藏第一个选择器。如果您不想隐藏它，只需禁用它，然后mrts17在上面的答案中为您提供解决方案。

<div id = 'Select1Div'>
    <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>        

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

    <script>
        $(function() {
            $('#"Select2').change(function(){
                $('Select1Div').hide(); 
                   });
        });
    </script>

如何在用户点击第二个下拉列表时关闭第一个下拉列表？

3 个答案: