我有以下显示和隐藏内容的代码，问题是当我单击“显示更多”时，它会打开所有其他部分，而不是我单击的那个特定部分，并且与“显示较少”相同
这是我的代码和小提琴演示
$(document).ready(function() {
$("h4.showMore").on("click",function() { $(this).parent().find(".hideResult").addClass("showResult").removeClass("hideResult");
$(this).parent().find(".showMore").css("display", "none");
$(this).parent().find(".showLess").css("display", "block");
});
$("h4.showLess").on("click",function() {
$(this).parent().find(".showResult").removeClass("showResult").addClass("hideResult");
$(this).parent().find(".showMore").css("display", "block");
$(this).parent().find(".showLess").css("display", "none");
});
});
演示：https : //jsfiddle.net/8y1dp5ej/3/
将div每个部分分开
jsonVals += '<div class="newSection">'; // ADDED THIS
// the rest of the code with all the information
jsonVals += '</div>'; // ADDED THIS
然后使用.closest()函数查找哪个show more或show less按钮属于哪个部分
$("h4.showMore").on("click",function() {
$(this).closest('.newSection').find(".hideResult").addClass("showResult").removeClass("hideResult");
$(this).closest('.newSection').find(".showMore").css("display", "none");
$(this).closest('.newSection').find(".showLess").css("display", "block");
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句