Закрытия всех другие DIVS при открытии одного

Question

То, что я пытаюсь достичь следующего

1. Есть два DIVS с выпадающим меню. Мне нужно закрыть его, открыв другую функцию щелчка.

2. Я также пытаюсь вывести мышью, как только событие выйдет из раскрывающегося списка.

3. Я хотел бы закрыть DIV, как только щелчок даже произойдет за пределами раскрывающегося списка.

Ниже приводится HTML

<div class="first-div" style="display:inline-block"> 
<a class="first-div-link"><h6>REGION</h6></a> 
     <div class="first-div-dropdown"> 
      <p>Drop down test from first DIV</p> 
     </div> 
</div> 

<div id="second-div" style="display:inline-block; float:right"> 
    <a href="#" class="second-div-link"><h6>REGISTER</h6></a> 
     <div class="second-div-dropdown"> 
      <p>Drop down test from second DIV</p> 
     </div> 
</div> 

CSS, следящие

.first-div-dropdown, .second-div-dropdown{ 
    background-color:#555; 
    color:white; 
    height:100px; 
    width:200px; 
} 

JS, следящие

$(document).ready(function(){ 
    $('.first-div-dropdown').hide(); 
    $('.second-div-dropdown').hide(); 

    $('.first-div-link').on('click', function (event){ 
     $('.first-div-dropdown').slideDown(300); 
    }); 

    $('.second-div-link').on('click', function (event){ 
     $('.second-div-dropdown').slideDown(300); 
    }); 

}); 

Есть ли способ, чтобы использовать это в качестве функции для управления несколько DOM в HTML? Если бы кто-нибудь мог мне помочь с текущим примером?

Благодаря

Answer 1

Пути следовать здесь использовать общий класс на ваши вопросы, вам не нужно создавать новые имена классов, если все будут иметь одни и те же стили и будут выполнять то же действие. Проверьте это:

$(document).ready(function() { 
 
    $('.cont-div').on('click', 'a', function(e) { 
 
    e.preventDefault(); 
 
    $('.div-dropdown').slideUp(300); 
 
    $(this).next('.div-dropdown').stop().slideToggle(300); 
 
    }); 
 
    
 
    //To close if you click outside the container divs 
 
    $('body').on('click', function(e) { 
 
    if (!$(e.target).parents('.cont-div').length) { 
 
     $('.div-dropdown').slideUp(300); 
 
    } 
 
    }) 
 
});

body { 
 
    height: 600px; 
 
    background: #e1e1e1; 
 
} 
 
.cont-div { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 50%; 
 
} 
 
.div-dropdown { 
 
    background-color: #555; 
 
    color: white; 
 
    height: 100px; 
 
    width: 200px; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="cont-div"> 
 
    <a href="#"><h6>REGION</h6></a> 
 
    <div class="div-dropdown"> 
 
    <p>Drop down test from first DIV</p> 
 
    </div> 
 
</div><!-- 
 
--><div class="cont-div"> 
 
    <a href="#"><h6>REGISTER</h6></a> 
 
    <div class="div-dropdown"> 
 
    <p>Drop down test from second DIV</p> 
 
    </div> 
 
</div>

Answer 2

Если вы хотите получить более конкретные, вы можете назначить подобный класс для обоих меню, в приведенном ниже случае, я добавил «выпадающий-DIV» в классе оба меню, а затем просто добавили триггер, когда вы нажимаете на то, что не является ссылкой, оно будет скрывать меню, вызывая $ ('. dropdown-div'). hide();

$(document).ready(function(){ 
 
    $('.first-div-dropdown').hide(); 
 
    $('.second-div-dropdown').hide(); 
 

 
    $('.first-div-link').on('click', function (event){ 
 
     $('.first-div-dropdown').slideDown(300); 
 
    }); 
 

 
    $('.second-div-link').on('click', function (event){ 
 
     $('.second-div-dropdown').slideDown(300); 
 
    }); 
 

 
}); 
 

 
$(document).on('click', function(event) { 
 
    if (!$(event.target).closest('a').length) { 
 
    $(".dropdown-div").hide(); 
 
    } 
 
});

.first-div-dropdown, .second-div-dropdown{ 
 
    background-color:#555; 
 
    color:white; 
 
    height:100px; 
 
    width:200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="first-div " style="display:inline-block"> 
 
<a class="first-div-link"><h6>REGION</h6></a> 
 
     <div class="first-div-dropdown dropdown-div"> 
 
      <p>Drop down test from first DIV</p> 
 
     </div> 
 
</div> 
 

 
<div id="second-div" style="display:inline-block; float:right"> 
 
    <a href="#" class="second-div-link"><h6>REGISTER</h6></a> 
 
     <div class="second-div-dropdown dropdown-div"> 
 
      <p>Drop down test from second DIV</p> 
 
     </div> 
 
</div>

Answer 3

Вы имеете дело с государственным управлением в коллекции. У вас есть 2 выпадающих меню, но 3 состояния: раскрывающееся состояние, выпадающее состояние двух и совокупность состояний выпадающих списков.

Использование jQuery, самый распространенный способ обработки этого, который я видел, - начать с «перезагрузки» состояния коллекции каждый раз, сокрыв все выпадающие списки при нажатии.

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

<div class="first-div" style="display:inline-block"> 
    <a class="dropdown-trigger"><h6>REGION</h6></a> 
    <div class="dropdown-menu"> 
     <p>Drop down test from first DIV</p> 
    </div> 
</div> 

<div id="second-div" style="display:inline-block; float:right"> 
    <a class="dropdown-trigger"><h6>REGION</h6></a> 
     <div class="dropdown-menu"> 
      <p>Drop down test from second DIV</p> 
     </div> 
</div> 

JS:

$('.dropdown-trigger').click(function (event) { 
    event.stopPropagation(); 
    var $menu = $(this).siblings('.dropdown-menu'); 
    $('.dropdown-menu').not($menu).slideUp(300); 
    $menu.slideToggle(300); 
}); 


$(document).click(closeDropdowns); 

function closeDropdowns() { 
    $('.dropdown-menu').slideUp(300); 
} 

Работая codepen: http://codepen.io/amishstripclub/pen/wzbEVo

Answer 4

Вы можете попробовать использовать toggle так:

$(document).ready(function(){ 
    $('.first-div-link').on('click', function (event){ 
    $('.first-div-dropdown').toggle(); 
    $('.second-div-dropdown').toggle(); 
    }); 

    $('.second-div-link').on('click', function (event){ 
    $('.first-div-dropdown').toggle(); 
    $('.second-div-dropdown').toggle(); 
    }); 
});