Question

我找不到答案，虽然看起来很简单。我有一个元素，当点击使元素slideDown.When发生这种情况时，另一个元素被添加到结尾，就像一个链接到slideUp相同的内容。所以slideDown工作，但slideUp没有。我甚至只是将slideUp更改为仅显示警报，而且它没有被调用。我将在页面上有几个这样的，所以我需要调用“next”.hide-reveal div。

HTML：

.hide-reveal{
   display:none;
}

和css：

$('.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");
});

和js：

while

为什么我的第二个功能不起作用？

Answer 1

因为.read-more元素在附加到$('.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"); }); });元素的onclick事件中实例化。你需要这样做：

＆＃13;

.hide-reveal{
   display:none;
}

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

slideUp不起作用

1 个答案: