Переключить divs щелчком мыши

Question

У меня есть 15 divs, которые скрыты по умолчанию. Они могут быть видны, как только я нажимаю каждую кнопку, связанную с каждым из них, а также скрываю их, нажимая каждую связанную кнопку. Теперь я хочу, чтобы: Если я нажимаю в любом месте документа, отличного от div, и если какой-либо из уже видимых divs, он должен быть скрыт сразу после нажатия на div и т. Д. Я преодолел эту проблему, используя код ниже только если есть один div, с которым я хочу играть.

function check(e){ 
    var target = (e && e.target); 
    var obj = document.getElementById('myDiv'); 
    checkParent(target)?obj.style.visibility="hidden":null; 
    } 
function checkParent(t) 
    { 
      if(t==document.getElementById('myDiv')) 
      { 
      return false; 
      } 
      return true;  
    } 

Что бы идеальным решением, если есть, по крайней мере, более двух дивы, что я хочу, чтобы управлять способом, как упоминалось выше? Divs имеем класс сказать «cmnClass» .Я попытался это (но напрасно):

if(t.className!="cmnClass") 
    { 
    e = document.getElementsByTagName('div'); 
     for(var i=0;i<e.length;i++) 
     { 
     if(e[i].className=="cmnClass") 
     e[i].style.visibility="hidden"; 
     } 
    } 

хорошее решение, как ожидается, что также быстрее

Answer 1

Если вы можете использовать JQuery, то вы можете присвоить каждому DIV класс, который позволит сценарий знать, что это DIV, который может быть переключены. Это будет использоваться для скрытия при нажатии на «фон» контейнера DIV.

Другая часть вашего вопроса может быть решена методом siblings(), но вы должны использовать определенную структуру.

Например, если ваш контент структурирован как этот

<div id="main-container"> 
    <div class="element-container"> 
     <div class="content">Some text</div> 
     <div class="button">Clickable DIV</div> 
    </div> 
    <div class="element-container"> 
     <div class="content">Some other text</div> 
     <div class="button">Clickable DIV</div> 
    </div> 
    <div class="element-container"> 
     <div class="content" hidden>Third text</div> 
     <div class="button">Clickable DIV</div> 
    </div> 
</div> 

Затем с правильным CSS стиля вы можете достичь запрашиваемую поведение этого JQuery код:

Отредактировано:

$(".button").click(function(){ 
    $(this).siblings(".content").toggle(); 
}); 

$(document).click(function(e){ 
    if(!$(".element-container").is(e.target) 
     && $(".element-container").has(e.target).length === 0) 
    { 
     $(".content").hide(); 
    } 
}); 

jsFiddle

Запрошенное редактирование:

Тройной знак равенства является строгим компаратором - см. this documentation. Итак, строка $(".element-container").has(e.target).length === 0) проверяет, есть ли в ней контейнер has и has и текущая целевая цель в нем (e.target) .. В этом случае он сравнивается с нулем, поэтому он возвращает true, если он не ,

Answer 2

Если вы можете использовать jquery, вот как это сделать. Я только что создал fiddle, чтобы продемонстрировать.

$(document).click(function (e) 
{ 
    var element = $(".mydivclass"); 

    if (!element.is(e.target) 
    && element.has(e.target).length === 0) 
{ 

    element.toggle(); 
} 

});

Для объяснения:

if (!element.is(e.target) 

проверяет, является ли это DIV элемент, который щелкнул и

element.has(e.target).length === 0 

проверяет, есть ли какие-либо элементы внутри DIV, которые были щелкнули.

Если нет, он переключает видимость DIV.

Вы можете очень хорошо установить свойства css, если вы не хотите использовать переключатель.

element.css("display","none");