3 回答

TA貢獻2041條經驗 獲得超4個贊
首先,您必須將 html div 更改為以下幾行:
<div>
<a class='more-detail' style='cursor: pointer; font-color:#0000ff;'>More...</a>
<div class='detail-section' style='display: none;'>
details details details details details details details details details details
</div>
<a class='less-detail' style='cursor: pointer; font-color:#0000ff;'>Less...</a>
</div>
然后將您的 jquery 更改為:
$(".more-detail").click(function(){
var $this = $(this);
var $detail = $this.next(".detail-section");
var $lessDetail = $detail.next(".less-detail");
$this.css("display", "none");
$detail.css("display", "block");
$lessDetail.css("display", "block");
});
$(".less-detail").click(function(){
var $this = $(this);
var $detail = $this.prev(".detail-section");
var $moreDetails = $detail.prev(".more-detail");
$detail.css("display", "none");
$moreDetails.css("display", "block");
$this.css("display", "none");
});

TA貢獻1806條經驗 獲得超8個贊
使用this與.next()和.prev()方法:
$(".more-detail").click(function(){
$(this).next(".detail-section").css("display", "block");
$(this).next(".less-detail").css("display", "block");
$(this).css("display", "none");
});
$(".less-detail").click(function(){
$(this).prev(".detail-section").css("display", "block");
$(this).prev(".more-detail").css("display", "block");
$(this).css("display", "none");
});
- 3 回答
- 0 關注
- 170 瀏覽
添加回答
舉報