2

在过去的几个小时里，我一直在尝试自己做这件事，并使用谷歌寻找解决方案，但无济于事。

因此，如果您能提供帮助，我将非常感激！

基本上我有一个页面，在“预览模式”中有 3 个单独的传记，它只显示每个传记的第一段。

当您单击一个生物的“阅读更多”时，它会打开“完整模式”。

目前发生的情况是，如果我单击一个“阅读更多”链接，它会打开所有 3 个生物的完整模式。

我如何编辑以下代码；

  • 它只会打开我点击的链接的完整模式简介
  • 使其可重复使用，这样我就不必为每个生物复制代码 3 次

代码：

$("a#btnReadMore").click(function() {
    $('.readMoreSlider').slideToggle("fast");
    $(this).toggleClass("readMoreSliderActive"); 
    return false;
});

谢谢你的帮助！

4

2 回答 2

1

这取决于您的标记的外观。ID 必须是唯一的。我将假设：

<div class="bio">
  <p>...</p>
  <a class="readMore" href="#">read more</a>
  <div class="more">
    <p>...</p>
    <p>...</p>
    <p>...</p>
  </div>
</div>

使用 CSS：

div.more { display: none; }

和 Javascript：

$(function() {
  $("a.readMore").click(function() {
    $(this).next("div.more").slideToggle();
    return false;
  });
});
于 2010-04-20T08:43:50.920 回答
0 
$("a.btnReadMore").click(function(){ 
//--^ - Make 'btnReadMore' a CSS class, not an ID

  // with this you reference *all* elements of class 'readMoreSlider', 
  // but you want only a single one
  $('.readMoreSlider').slideToggle("fast"); 

  // this should be okay
  $(this).toggleClass("readMoreSliderActive"); 
  return false; 
});

So if you have, hypothetically:

<div class="bio">
  <div class="readMoreSlider">The bio Text...</div>
  <a class="btnReadMore">Read more</a>
</div>

You would need this modification to find the right readMoreSlider for a certain click.

$(this).parent('.bio').find('.readMoreSlider').slideToggle("fast");

Depending on your actual markup, your's might look a bit differently.

于 2010-04-20T08:45:03.417 回答