slideUp不起作用

我找不到答案，儘管看起來很簡單。我有一個元素，單擊時會使元素slideDown。當發生這種情況時，會將另一個元素添加到結尾，它的作用類似於鏈接，以便滑動相同的內容。所以slideDown可以工作，但slideUp不能。我甚至只是將slideUp更改爲只顯示一個提醒，並沒有被調用。我將在頁面上顯示其中幾個，所以我需要調用「next」.hide-reveal div。slideUp不起作用

HTML：

<p class="read-more">read more link</p> 
<div class="hide-reveal"> 
    <p> here is first para</p> 
    <p> here is second para.</p> 
</div>

和CSS：

.hide-reveal{ 
    display:none; 
}

和JS：

$('.read-more').on('click',function(){ 
$(this).next('.hide-reveal').slideDown().after("<p class=\"read-less\">read less</p>"); 
}); 
$(".read-less").on('click',function(){ 
    alert("hi"); 
});

爲什麼我的第二個功能的工作？

來源

2016-03-21 james

事件偵聽器未連接到任何東西;它在頁面上沒有'.read-less'元素時被解析。當你創建它時，或者使用一個文檔監聽器，可以將事件監聽器添加到'.read-less'元素中：'$（document）.on（'click'，'.read-less'，function（）{ alert（'hi'）;}）;' –

因爲.read-less元素在附加到.read-more元素的onclick事件中實例化。你需要這樣做：

$('.read-more').on('click',function(){ 
 
$(this).next('.hide-reveal').slideDown().after("<p class=\"read-less\">read less</p>"); 
 
$(".read-less").on('click',function(){ 
 
    alert("hi"); 
 
}); 
 
});

.hide-reveal{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<p class="read-more">read more link</p> 
 
<div class="hide-reveal"> 
 
    <p> here is first para</p> 
 
    <p> here is second para.</p> 
 
</div>

來源

2016-03-21 21:57:25 gmanou

slideUp不起作用

回答

相關問題