2015-02-07 2 views
0

jquery를 사용하여 여러 대상을 전환합니다. 한 번 열려있는 div를 닫는 코드를 만들었습니다. 그런 다음 x를 눌러 열린 div를 닫습니다. 같은 토글을 다시 열면 x가 더 이상 존재하지 않습니다.Jquery가 닫히고 사라진다

HTML

<a class="showSingle" target="1">show 1</a> 
<a class="showSingle" target="2">show 2</a> 

<div id="div1" class="targetDiv bio">Lorum Ipsum1 <div class="close">x</div></div> 
<div id="div2" class="targetDiv bio">Lorum Ipsum2</div> 

JQuery와는

jQuery(function() { 
    jQuery('.showSingle').click(function() { 
     var index = $(this).index(), 
      newTarget = jQuery('.targetDiv').eq(index).slideDown(); 
     jQuery('.targetDiv').not(newTarget).slideUp(); 
    }); 
    $(".close").click(function(){ 
     $(".targetDiv").hide("fast"); 
     $(this).toggle("fast"); 
    }); 
}); 

이 어떻게 하나가 바이오 클래스를 클릭하여 가까운 전환 할 수 있습니다 또는 X과의 긴밀한 전환 및 사용

.targetDiv { 
    display: none 
} 
.bio { 
    background: #f6f6f6; 
    margin-top: 15px; 
    padding: 20px; 
    display: none; 
    border: 1px solid grey; 
    position: relative; 
} 
.close { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
} 

CSS 아직도 다시 나타나게하십시오.

http://jsfiddle.net/eLy4b00n/

답변

1

내가 JS에 대해 아무것도 가까이 알고 있지만 그것으로 주위 하구 내가 가진 작동하기 :

jQuery(function() { 
    jQuery('.showSingle').click(function() { 
     var index = $(this).index(), 
      newTarget = jQuery('.targetDiv').eq(index).slideDown(); 
     $(".close").show("fast"); 
     jQuery('.targetDiv').not(newTarget).slideUp(); 
    }); 
    $(".close").click(function(){ 
     $(".targetDiv").hide("fast"); 
     $(this).toggle("fast"); 
    }); 
}); 

추가에게 다음 줄

$(".close").show("fast"); 

바이올린 : http://jsfiddle.net/36b99b8t/

0

명세서 삭제 :

$(this).toggle("fast"); 

더 이상 표시되지 않도록 토글을 숨 깁니다. 부모 컨테이너를 숨기고 있기 때문에 이것이 필요하지 않습니다. 이를 제거하면 상위 컨테이너를 표시 할 때 상위 컨테이너가 여전히 있어야합니다.

관련 문제