隱藏/顯示切換具有相同類名的單獨的div

Question

我有一個UL列表，每個LI都有一個隱藏的DIV，以及一個顯示隱藏DIV的「更多信息」鏈接。 但是，單擊此按鈕也會顯示所有其他LI的隱藏DIV。

我該如何隱藏/顯示LI中的DIV，而沒有其他所有隱藏的DIV顯示？

如果我點擊一個如何隱藏其他人？我想保留此部分，以防萬一我想稍後刪除它。

同樣點擊我希望「更多信息」鏈接中的文本更改爲「隱藏」。

這裏是我當前的腳本：

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

在訪問li 您應該使用this背景下請儘量

$(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

試試這個：

$(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

如果HTML結構是這樣的：

<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代碼爲您的要求會是這樣

$('_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會打開實際內容並隱藏所有其他內容：

<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：

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

     }); 

CSS使最初隱藏作業信息：

 <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。

的jQuery機能的研究概覽...嘗試：

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