我正在尝试使用 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;
});
最佳答案
当 $(this) 引用 p 标签时,您可以更改文本 - 所以只需使用 $(this).parent() 来切换父“面板”(您可以将选择器传递给 .parent()如果需要向上跳几个“级别”,则调用函数。
关于javascript - 使用两个链接显示/隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5144581/