first Dropdown hide on second drop down click event

Question

Я использую 2 меню droppwon для одной тропы на одной странице. Я хочу закрыть первое выпадающее меню, когда пользователь нажимает на второе выпадающее меню.

Я использую код ниже в своем проекте.

<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

<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

Update: проверка ответ на этот вопрос: jquery drop down menu closing by clicking outside

Я добавил его к скрипке, он работает функционально, но выпадающие потерять их расположение. Вы можете попробовать вызвать функцию hide() при нажатии на раскрывающееся меню вместо $ (document).

Answer 2

У меня есть решение - я просто поместил этот код внутри document.ready(), и он работает.

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

Благодаря