如何在用戶點擊第二個下拉菜單時關閉第一個下拉菜單？

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> 

我想關閉Select1當用戶點擊Select2。請給我建議如何做到這一點。

• JSFiddle here

Answer 1

它看起來像插件沒有爲onclick事件的任何選項，所以如果你將下面的代碼添加到Load事件：

$('.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

被點擊第二個時，這將隱藏第一選擇。如果您不想隱藏它，只需將其禁用，那麼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> 

Answer 3

這個答案是onchange事件 ..如果任何機構想的呢

Fiddle Demo here

1）將選擇一在一個DIV

2）定義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>