使部分隱藏的div顯示完整內容

如果您能爲我找到解決方案，我將非常感激。我有一個在部分隱藏的div（div是200px高度）的文章列表。當我點擊閱讀時，它應該很好地滑動顯示其餘的內容。使部分隱藏的div顯示完整內容

下面是HTML：

<style> 
    .content {height:200px;} 
</style>  
<div class="content_1">Full text here...</div><a href="" class="readmore"></a> 
<div class="content_2">Full text here...</div><a href="" class="readmore"></a> 
<div class="content_3">Full text here...</div><a href="" class="readmore"></a> 
</div>

這裏是jQuery代碼（它的工作原理，但僅適用於content_2：

var len = $('.wrap > .content').length; 
    $("a.readmore").click(function(event){ 
    var hiddenContent = $(".wrap > .content_2"); 
    event.preventDefault(); 
    hiddenContent.animate({ 
    height: '500px' 
    }, 1000, function() { 
    // Animation complete. 
    }); 

    });

如何遍歷「內容_」 +我，讓我可以讓它爲特定div工作我點擊了嗎？我嘗試了循環與每個，等等...但我沒有運氣

來源

2012-01-25 Kandinski

你使用的ID，它應該是一個類和類，你應該使用的ID ..... ID應該是唯一的，並且類可以在多個DOM元素上使用 – ManseUK

我也對你的內容加載的位置感到困惑嗎？和.wrap在哪裏？也許試着添加一個http://jsfiddle.net來幫助我們理解你的問題？ – ManseUK

是的。這是我僅在這裏製作的一個錯誤類型。內容正在從文章數據庫中加載。它會加載完整的節點而不是修剪過的節點，但它會隱藏其中的一部分，並在您單擊閱讀更多內容後將其解除。 – Kandinski

您可以選擇jQuery中的前一個元素真的很簡單。帽子會顯示內容，然後隱藏它，如果用戶再次點擊閱讀更多鏈接。它也會更改鏈接標籤。 jQuery讓這一切真的很直截了當：

$("a.readmore").click(function(e){ 
    if($(this).prev("div.content").hasClass("open")){ 
     $(this).prev("div.content").animate({"height":50}).removeClass("open"); 
     $(this).html("More..."); 
    }else{ 
     $(this).prev("div.content").animate({"height":500}).addClass("open"); 
     $(this).html("Less..."); 
    } 

    e.preventDefault(); 
});

下面是爲您的jsfiddle活生生的例子：http://jsfiddle.net/JmLqp/

來源

2012-01-25 21:37:09

謝謝你，我做了我的一天。我仔細檢查了你的代碼，事實上prev（）函數在這裏非常有用。祝福你！ – Kandinski

很高興能幫到你！：O） –

使部分隱藏的div顯示完整內容

回答

相關問題