Question

我正在做一個網站，由不那麼科技精明的人來維護，我需要能夠給他們添加使用jquery向上/向下滑動以顯示其內容的「see-more」錨點的能力。

我的代碼適用於讀取更多的單個實例，但是當存在多個此實例時，它會相當麻煩。

使用Javascript/jQuery的

$(".see-more").nextUntil(".see-less").wrapAll("<div class='see-more-content'></div>"); 


$(".see-less").hide(); 
var count= 1 
/* 
$(".see-more-content").each(function(){ 
    var count= count+1; 
    $(this).data("count",count); 
    console.log(count); 
}); 
*/ 

$(".see-more-content").slideUp(0); 



$(".see-more").click(function(){ 

    $(".see-more-content").slideToggle(); 
    $(".see-more").hide(); 
    $(".see-less").show(); 

}); 
$(".see-less").click(function(){ 
    $(".see-more-content").slideToggle(); 
    $(".see-less").hide(); 
    $(".see-more").show(); 
}); 

HTML

<a class="see-more">See More...</a> 
<ul> 
<li>Advanced Elastic search Technology </li> 
<li>Document Text Search</li> 
<li>Embed Code Web Publishing for Images, Video &amp; PDFs</li> 
<li>Video Management with HTML5 Full</li> 
<li>Previews On the Fly Conversions and Transcoding</li> 
<li>Print on Demand</li> 
<li>Stylized Collections (Lightboxes/Galleries)</li> 
<li>Alerts and Notifications</li> 
<li>Comments, Ratings and Favorites</li> 
<li>WordPress and Drupal CMS Integrations</li> 
<li>Dropbox Integration</li> 
<li>Asset Level Performance Analytics • Site Activity Analytics Dashboard</li> 
<li>Unlimited Custom User Access Levels</li> 
<li>Integrated Content Contribution and Workflow</li> 
<li>Personal Profile Management</li> 
<li>Mobile App and Site&nbsp;</li> 
<li>Watermarking</li> 
<li>Rights Management</li> 
<li>All New Feature Releases3</li> 
</ul> 
<a class="see-less">See Less...</a></div> 

我希望發生什麼： 我想與類錨之間的一切看到，越來越錨帶班看到更少，要包裹在一個div，當看到更多的錨點擊div jquery滑落，當看到更多被點擊，並在點擊時看到更少。

正在發生的事情： 它的工作原理完美的，當只有一個實例看，多看少的頁面。 https://jsfiddle.net/TheWebTech/by3LsLuu/

當html中有多個see-more和see-less的實例時，第一個實例之後的所有see-more + see-less塊的內容都被移動/包裝到第一個block實例中看到更多的看到更少的塊被添加。

https://jsfiddle.net/TheWebTech/by3LsLuu/4/

我如何防止一切被裹入見，多看少塊的第一個實例，而是各有一個分別得到包裹？

獎金，但並非真正需要：我怎樣才能使每個看到更多的部分上下滑動分開？

Answer 1

如果你要保持佈局相同，您可以使用.prev()和.next() jQuery方法，以確定哪些你所指的選擇器組也是。這裏有一個更新的撥弄着兩個實例：

https://jsfiddle.net/szva79d6/1/

首先，我將它使你的包裝功能適用於每個選擇獨立，就像這樣：

$(".see-more").each(function() { 
    $(this).nextUntil(".see-less") 
      .wrapAll("<div class='see-more-content'></div>"); 
}); 

我做了什麼在兩個事件方法中，使每個事件僅對前一個或下一個兄弟進行操作，以便將您的事件正確委派給每個動態包裝的元素。

$(".see-more").click(function() { 
    var $more = $(this), 
     $content = $more.next(".see-more-content"), 
     $less = $content.next(".see-less"); 

    $content.slideToggle(); 
    $more.hide(); 
    $less.show(); 

}); 

$(".see-less").click(function() { 
    var $less = $(this), 
     $content = $less.prev(".see-more-content"), 
     $more = $content.prev(".see-more"); 

    $content.slideToggle(); 
    $less.hide(); 
    $more.show(); 
}); 

Answer 2

你需要的目標具體到自身，試試這個：

$(".see-more").click(function(){ 
    $(this).next(".see-more-content").slideToggle(); // find next content and show 
    $(this).hide(); // hide the see more button 
    $(this).nextAll('.see-less').first().show(); // show the next see less button 

}); 

$(".see-less").click(function(){ 
    $(this).prev(".see-more-content").slideToggle(); 
    $(this).hide(); 
    $(this).prevAll(".see-more").first().show(); 
}); 

Here's an updated fiddle