顯示/隱藏不能正常工作？

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() { ... }