使用兩個鏈接顯示/隱藏

Question

我試圖使用2個不同鏈接顯示/隱藏內容，並單擊時更改它們的文本。

這裏是完整的JavaScript。鏈接被添加到標記使用jQuery的2個不同的div。鏈接應達到打開/關閉隱藏內容和更改鏈接文本的相同結果。

'this'關鍵字可以正常工作，但不會更改鏈接上的文字。 如果我使用選擇器'.products-tech-show p'代替。文本更改但不隱藏面板。

任何想法？

var maxHeight = $('.products-techspec-container').height(); 
/* This gets the first few rows and their height before making the box shorter 
Instead of just giving it a fixed height, it calcs the height of them instead */ 
var numOfRows = $('.products-techspec-container table tr').length; 
var height = 0; 
for (var i = 0; i < numOfRows; i++) { 
    h = $('.products-techspec-container table tr:nth-child(' + i + ')').height();  
    if (height+h < 202) { 
     height+=h; 
    } else { 
     break; 
    } 
} 

/* product slides */  
$('.products-techspec-container, .products-desciption-container').css({ 'height': height + 'px', 'overflow': 'hidden' }); 
// Add the JS sliding toggle instead of it being in the HTML 
//alert(height); 
if(height>=129) 
{ 
    $('.products-techspec-container, .products-desciption-container').after('<div class="products-tech-show"><div class="sliderbar"><div class="slidertab"><p class="icon-arrow-down-orange"><a href="#" class="products-techspec-toggle"><strong>Show more</strong> product details</a></p></div></div></div>'); 

}else{ 

    $('.products-techspec-container, .products-desciption-container').after('<div class="products-tech-show"><div class="sliderbar"></div></div>'); 
} 

$('.products-techspec-toggle').click(function() { 
    $('.products-tech-show p').toggleClass("bgpos-arrow-up-orange"); 
    var strong = $(this).find('strong'); 
    if (strong.text() == "Show fewer") {    
     strong.text("Show more");   
     var SupportDiv = document.getElementById('technical-spec');  
     //Scroll to location of SupportDiv on load 
     window.scroll(0,findPos(SupportDiv));   
     $('.products-techspec-container, .products-desciption-container').stop().animate({ 'height' : height + 'px' }, 'slow');   
    } else {    
     strong.text("Show fewer");   
     $('.products-techspec-container, .products-desciption-container').stop().animate({ 'height' :maxHeight + "px" }, 'slow');   
    } 
    return false; 
}); 

Answer 1

當$（這）是指p標籤，你可以改變文本 - 所以只需使用$（本）.parent（）來切換父「面板」（你可以通過選擇進入.parent（）函數調用如果你需要跳過幾個「關卡」up。