동일한 클래스 이름을 가진 별도의 div를 표시/숨기기

Question

UL 목록이 있으며 각 LI에는 숨겨진 DIV가 있으며 "추가 정보"링크에는 숨겨진 DIV가 표시됩니다. 그러나이 버튼을 클릭하면 다른 모든 LI의 숨겨진 DIV도 표시됩니다.

어떻게하면 LI에서 DIV를 숨기거나 표시 할 수 있으며 다른 숨겨진 DIV의 프로그램을 모두 볼 수 없습니까?

하나를 클릭하면 어떻게 다른 사람을 숨길 수 있습니까? 나중에 제거하고 싶은 경우에 대비하여이 부분을 별도로 유지하고 싶습니다.

클릭하면 "추가 정보"링크의 텍스트를 "숨기기"로 변경하고 싶습니다. li 에 액세스하는 동안 당신은 this 컨텍스트를 사용한다

Answer 1

는 다음 jQuery를 작동합니다 :

$('.grey_button a').toggle(function() { 
    $(this).closest('li').find('.job_description').slideDown(); 
    return false; 
    }, 
    function() { 
     $(this).closest('li').find('.job_description').slideUp(); 
    return false; 
    }); 

이 HTML은 다음과 같은 가정

<ul> 
    <li><span class="grey_button"><a href="#">Show more information</a></span> 
     <div class="job_description">Job information...</div></li> 
    <!-- other list items... --> 
</ul> 

JS Fiddle demo.

덧붙여, 전달되는 인수없이, slideUp()/slideDown()에 빈 문자열을 통과 할 필요 (정수 (millisecons의 숫자 중 하나), 또는 문자열) 디폴트 값은 400 밀리 초, 대신 사용됩니다가 없습니다.

참고 :

• closest().
• find().

Answer 2

$(window).load(function() { 

$('.grey_button a').toggle(function() { 
    //hide the other 
    $('.grey_button a').not($(this)).find('.job_description').each(function(){ 
     $(this).slideUp(); 
    }) 

    $('.job_description',this).slideDown(''); 
    return false; 
    }, 
    function() { 
     $('.job_description',this).slideUp(''); 
    return false; 
    }); 

}); 

Answer 3

그들 모두를 숨길 클래스에 .slideUp()를 호출하고 단지를 사용하여 시도하십시오 :

여기에 내 현재 스크립트입니다 $(this) 키워드는 li 내의 클래스 만 트리거합니다.

시도 :

$('.grey_button a').toggle(function() { $('.job_description').slideUp(); $(this).parent().find('.job_description').slideDown(); return false; }

Answer 4

이 시도 : HTML 구조는이 ::처럼

$(window).load(function() { 

var $jobs = $('.job_description'); 
$('.grey_button a').click(function() { 
    $closest = $(this).closest('li').find('.job_description'); 
    $jobs.not($closest).slideUp(); 
    $closest.slideDown(); 
    return false; 
}); 

}); 

Answer 5

경우 귀하의 요구 사항이

$('_show-more-info').click(function(){ 
    var thisAnchor = $(this); 
    var ul = thisAnchor.parents('.main'); 
    ul.find('.more-info').slideUp(); 
    thisAnchor.sibling('.more-info').slideDown(); 
}); 

Answer 6

This code처럼 될 것이기

<ul class="main"> 
    <li> 
     <p class="important-info">Bala bala</p> 
     <p class="more-info" style="display:none;">More bla bla</p> 
     <a class="_show-more-info">More Information</a> 
    </li> 
    <li> 
     <p class="important-info">Bala bala</p> 
     <p class="more-info" style="display:none;">More bla bla</p> 
     <a class="_show-more-info">More Information</a> 
    </li> 
<ul> 

는 JQuery와 코드 것 실제 콘텐츠를 열고 다른 모든 것을 숨 깁니다 :

<style type="text/css"> 
.job_description { display: none; } 

.grey_button.close span.hide, 
.grey_button.open span.more { display: none; } 

.grey_button.close span.more, 
.grey_button.open span.hide { display: inline; }​ 
</style> 
<script type="text/javascript" encoding="utf-8"> 
$(document).ready(function() { 
    $('.grey_button.close').live('click', function() { 
     $('.grey_button.open').click(); 
     $('.job_description').slideUp(); 
     $(this).siblings('.job_description').slideDown(); 
     $(this).toggleClass('close open'); 
     return false; 
    }); 
    $('.grey_button.open').live('click', function() { 
     $('.job_description').slideUp(); 
     $(this).toggleClass('close open'); 
     return false; 
    }); 
}); 
</script> 
<ul> 
<li>short description 
    <a class="grey_button close" href="#"> 
     <span class="more">read more</span> 
     <span class="hide">hide</span></a> 
    <div class="job_description">Here is more to read.</div> 
</li> 
<li>short description 
    <a class="grey_button close" href="#"> 
     <span class="more">read more</span> 
     <span class="hide">hide</span></a> 
    <div class="job_description">Here is more to read.</div> 
</li> 
<li>short description 
    <a class="grey_button close" href="#"> 
     <span class="more">read more</span> 
     <span class="hide">hide</span></a> 
    <div class="job_description">Here is more to read.</div> 
</li> 
<li>short description 
    <a class="grey_button close" href="#"> 
     <span class="more">read more</span> 
     <span class="hide">hide</span></a> 
    <div class="job_description">Here is more to read.</div> 
</li> 
</ul>​ 

Answer 7

JQuery와는 :

 <ul> 
     <li><span class="grey_button"><a href="#">Show more information</a></span> 
     <div class="job_description" style="display:none" >Job information...</div></li> 

    </ul> 

Answer 8

체크 아웃이 jsfiddle 예 here을 :

 $('.grey_button a').click(function() { 
      $(this).closest('li').find('.job_description').slideToggle(); 

     }); 

CSS는 작업 정보가 처음에 숨겨진합니다. JQuery와 fuction를 한 눈에

는 ... 시도 :

$('.top').on('click', function() { 
    $parent_box = $(this).closest('.box'); 
    $parent_box.siblings().find('.bottom').hide(); 
    $parent_box.find('.bottom').toggle(); 
});