Закрытие divs, нажав на дочерний div

Question

Я пробивал себе голову над этим - почему код ниже не работает?

<div class="what"> 
<ul> 

<li class="popup1"> 
    <div class="holder"> 
     <div class="big">Popup 1 
      <div class="more">more+ 
       <div class="popup">Contents of popup 1</p> 
        <div class="close">x</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</li> 

... 

<li class="popup3"> 
    <div class="holder"> 
     <div class="big">Popup 3 
      <div class="more">more+ 
       <div class="popup">Contents of popup 3</p> 
        <div class="close">x</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</li> 

</ul> 
</div> 

И ниже код JQuery, который работает в основном хорошо, но это не тогда, когда я нажимаю на х в DIV с классом «х».

$(".what .more").each(function(){ 
    $(this).find(".popup").hide(); 
}); 


$(".what").each(function(){ 
    $(this).find(".more").click(function() { 
     $(".popup").hide(); 
     $(this).find(".popup").show(); 
     // return false; 
    }); 

    $(this).find(".more .close").click(function() { 
     // alert(); 
     $(".popup").hide(); 
    }); 
}); 

Answer 1

Проблема заключается в том, что обе эти функции выполняются при нажатии на кнопку закрытия, поскольку он находится внутри родительского контейнера, имеющего .more класс. Поскольку Javascript - это событие, основанное на hide(), в каждом элементе выполняется более или менее одно и то же время, и show(), скорее всего, выполнит последнее, в результате чего DIV останется видимым.

Вы можете это исправить, перемещая .more к другому элементу, который не является родителем .popup

код также может быть упрощены - вам не нужно использовать функцию each(), например.

// Hide all .popup elements when the DOM is ready 
$(document).ready(function(){ 
    $(".popup").hide(); 
}); 

// Clicking any ".more .link" element will show that elements related content 
$(".more.link").click(function() { 
    // Hide all 
    $(".popup").hide(); 
    // Go to this elements parent and then find .popup and show it 
    $(this).parent().find(".popup").show(); 
}); 

// Clicking any .close will only execute this function and hide all .popup elements 
$(".close").click(function() { 
    $(".popup").hide(); 
}); 

HTML с новым <span class="more link"/> элементом

<li class="popup1"> 
    <div class="holder"> 
     <div class="big">Popup 1 
      <div class="more"> 
       <span class="more link">more+</span> 
       <div class="popup">Contents of popup 1 
        <div class="close">x</div> 
       </div> 
      </div> 
     </div> 
    </div> 
</li> 

См рабочую версию в этом http://jsfiddle.net/M2dZN/1/