實現jQuery的顯示/隱藏切換而不訪問標記

Question

我正在尋求一種更好的方法來重寫一個簡單的顯示/隱藏jQuery切換，可以允許基於使用div選擇器的實現;並沒有修改HTML標記（所以沒有添加類.hidden等）

我有一系列的div類.djseform_field和沒有其他選擇器內;試圖只使用這個類來打開這些div來顯示/隱藏jQuery切換。

Answer 1

可能是這樣的：

$(document).ready(function() { 
    // choose text for the show/hide link 
    var showText='read more...'; 
    var hideText='hide'; 

    // initialise the visibility check 
    var isVisible = false; 

    // append show/hide links to the element directly preceding the element with a class of "djseform_field" 
    $('.djseform_field').prev().append(' <a href="#" class="toggleLink">'+showText+'</a>'); 

    // hide all of the elements with a class of 'djseform_field' 
    $('.djseform_field').hide(); 

    // capture clicks on the toggle links 
    $('a.toggleLink').click(function() { 
     // switch visibility 
     isVisible = !isVisible; 

     // change the link depending on whether the element is shown or hidden 
     if ($(this).html()==showText) { 
      $(this).html(hideText); 
     } 

     else { 
      $(this).html(showText); 
     } 

     // toggle the display 
     $(this).parent().next('.djseform_field').slideToggle('slow'); 

     // return false so any link destination is not followed 
     return false; 
    }); 
}); 

Answer 2

你的jQuery應該是這樣的：

$(document).ready(function() { 
    $('.toggle-div').click(function(){ 

     $('.djseform_field').slideToggle("slow", function() { 

     }); 
}); 

你的HTML應該：

<div class="djseform_field">111</div> 
<div class="djseform_field">222</div> 
<div class="djseform_field" >333</div> 
<a href="javascript:void(0)" class="toggle-div">toggle</a> <!-- Whatever you want to on click hide/show divs for refs i used a tag -->