显示/隐藏不能正常工作？

Question

我有这样的一些HTML：

 <div class="clearfix wanted_item"> 
      <div class="clearfix"> 
       <div class="float_right"><img src="images/pin.png"></div> 
       <div class="float_right"> 
        <h3>a</h3> 
        <div>abcd</div> 
       </div> 
      </div> 
      <div class="float_right more_details" style="display: block;"> 
            <ul> 
        <li>some list</li>     </ul> 
       <div class="application_link">      
        <a class="orange_button" href="volunteer.php?volunteer_type=1"><span>apply</span></a> 
       </div> 
      </div> 
      <a class="float_left clearfix more_details_link" href="javascript:void(0);">Show details</a> 
     </div> 

而且我有这样的jQuery代码：

$(".less_details_link").click(function() { 
    $(this).parent().children(".more_details").slideUp(500); 
    $(this).text("Show details"); 
    $(this).removeClass('less_details_link'); 
    $(this).addClass('more_details_link'); 
}); 
$(".more_details_link").click(function() { 
    $(this).parent().children(".more_details").slideDown(500); 
    $(this).text("Hide details"); 
    $(this).removeClass('more_details_link'); 
    $(this).addClass('less_details_link'); 
}); 

出于某种原因，当我点击“显示”链接能正常工作，我也可以看到，它将类更改为less_details_link，但第二个click()函数无法在没有任何输出到控制台日志的情况下运行。当我点击“隐藏详细信息”链接时，它只是没有做任何事情。

Answer 1

jsFiddle Demo

这是因为当你添加一个类的元素，它不与它带来的事件处理程序，除非你对（jQuery API: on）使用的事件处理程序

$("body").on("click",".less_details_link",function() { 
$(this).parent().children(".more_details").slideUp(500); 
$(this).text("Show details"); 
$(this).removeClass('less_details_link'); 
$(this).addClass('more_details_link'); 
}); 
$("body").on("click",".more_details_link",function() { 
$(this).parent().children(".more_details").slideDown(500); 
$(this).text("Hide details"); 
$(this).removeClass('more_details_link'); 
$(this).addClass('less_details_link'); 
}); 

Answer 2

这是比它需要更复杂的方式。它的一个链接，只是给它一个额外的类来表示是否扩展或不扩展，然后做一个简单的if函数来确定是否激活。

谢谢@Kacey对.slideToggle()和.toggleClass()的推荐，更简单一些。

$(".more_details_link").click(function() { 
    var $this = $(this); 

    $this 
     .toggleClass('active') 
     .prev() 
     .stop() 
     .slideToggle(500); 

    $this.hasClass('active') ? $this.text("Show details") : $this.text("Hide details"); 
}); 

编辑为使用三元if功能的文本。

Answer 3

当你的jQuery加载时，没有.less_details_link可用，所以它不能挂钩.click()函数。你想要做的是设置你的功能，像这样：

$(".less_details_link").on("click", function() { ... } 
$(".more_details_link").on("click", function() { ... }