выпадающий вход в html

Question

У меня есть эти выпадающие формы, и я ищу способ их скопировать, когда я нажимаю нигде вне форм. Моего Javascript код, как показано ниже:

$(document).ready(
function(){ 
$('#login-trigger').click(
function(){ 
    $(this).next('#login-content').slideToggle();   

    }) 
}); 

$(document).ready(function() { 
$('#signup-trigger').click(
function(){ 
    $(this).next('#signup-content').slideToggle(); 

    })  
}); 

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

---

Answer 1

Просто добавьте базовый обработчик событий в сам документ:

$(document).click(function(){ 
     $('#login-content').slideUp(); 
     $('#signup-trigger').slideUp();  
    }) 
}); 

Answer 2

Я бы сделал что-то вроде этого, быстро и просто. Просто добавьте класс .sliding-content к вашим раздвижным элементам, затем добавьте это:

$(document).on('click', ':not(.sliding-content)', function() { 
    $('.sliding-content').slideUp(); 
}); 

Answer 3

Ну, я решил это так, благодаря оба ответу отправителям для руководства

$(document).ready(
function(){ 
$('#login-trigger').click(
function(e){ 
    $('#signup-content').slideUp(); 
    $('#categories').slideUp(); 
    e.stopPropagation(); 
    $(this).next('#login-content').slideToggle(); 
    $('#login-content').click(function(e){e.stopPropagation();}); 
    } 
) 
} 
); 

$(document).ready(function() { 
$('#signup-trigger').click(
function(e){ 
    $('#login-content').slideUp(); 
    $('#categories').slideUp(); 
    e.stopImmediatePropagation(); 
    $(this).next('#signup-content').slideToggle(); 
    $('#signup-content').click(function(e){e.stopPropagation();}); 
    })  
}); 

В основном я использовал е .stopPropagation, чтобы предотвратить падение самой кнопки вниз от вверх по своей форме слайда вниз. а затем добавили функцию документа Нажмите, чтобы скользить вверх все формы, которые скользили вниз

$(document).click(function(){function(){ 
$('#login-content').slideUp(); 
$('#signup-content').slideUp(); 
$('#categories').slideUp(); 

});