Показать/скрыть div по щелчку, переключиться при нажатии за пределами div

Question

Это то, что у меня есть до сих пор: Например, когда я нажимаю кнопку 1, содержимое 1 показывает, когда я нажимаю кнопку2, содержимое 1 закрывается, а содержимое2 появляется , Это работает до сих пор с этим кодом:

$("#buttons a").click(function(e){ 
    e.preventDefault(); 
    var toShow = $(this).attr('href'); 
    $(".togg").fadeOut(); 
    $(toShow).fadeIn(); 
    }); 

JSFiddle То, что я пытаюсь сделать, это сохранить эту функцию, но кое-что добавить: если Content1 уже открыта, переключить его при нажатии на его кнопку (button1), а также переключать его, когда вы нажимаете кнопку вне div1. Короче говоря, я хочу переключать его, когда вы нажимаете нигде, кроме самого div.

Answer 1

Как вы хотите проверить, является ли щелчок на элементе или вне элемента, что вам нужно проверить nodeName или tagName или id

$(document).click(function(e) { 
    //Check the element is none of the DIVS which we wants prevent. 
    if(e.target.id != "content1" && e.target.id != "content2" && e.target.id != "content3") 
    { 
     //Hide the content div which is visible now. 
     $('div.togg:visible').hide(); 
    } 
}); 

Вам просто нужно создать динамический селектор для достижения своего рода динамической функции переключения.

$("#buttons a").click(function(e){ 
    var selector = $('.'+$(this).attr('id')); 
    selector.toggle(); 
    $('div.togg').not(selector).hide(); 
}); 

$("#buttons a").click(function(e){ 
 
    var selector = $('.'+$(this).attr('id')); 
 
    selector.toggle(); 
 
    $('div.togg').not(selector).hide(); 
 
}); 
 
$(document).click(function(e) { 
 
    //Check the element is none of the DIVS which we wants prevent. 
 
    if(e.target.id != "content1" && e.target.id != "content2" && e.target.id != "content3") 
 
    { 
 
     //Hide the content div which is visible now. 
 
     $('div.togg:visible').hide(); 
 
    } 
 
});

.content1 {display:none;} 
 
.content2 {display:none;} 
 
.content3 {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="buttons"> 
 
    <a href="#" id="content1">Div 1</a> 
 
    <a href="#" id="content2">Div 2</a> 
 
    <a href="#" id="content3">Div 3</a> 
 
</div> 
 
<div> 
 
    <div class="content1 togg">1111</div> 
 
    <div class="content2 togg">2222</div> 
 
    <div class="content3 togg">3333</div> 
 
</div>