0

下面的代码适用于 ONE Reveal/Hide Text 过程

<div class="reveal">Click Here to READ MORE...</div>
<div style="display:none;">

<div class="collapse" style="display:none;">Collapse Text</div>

但是，如果此代码重复多次，则折叠文本会显示并且不会消失，实际上与展开冲突以显示更多文本而不是应有的折叠。

在此http://jsfiddle.net/syEM3/4/ 中单击任何单击此处以阅读更多内容...注意折叠文本如何显示在段落的底部并且不会消失。单击折叠，它会显示更多文本。

我如何防止这种情况并开始工作？

4

4 回答 4

0

在你的代码中

 $('.reveal').click(function() {
    $(this).slideUp(100);
    $(this).next().slideToggle();
    $(".collapse").slideDown(100);
 });
 $('.collapse').click(function() {
    $(this).slideUp(100);
    $(this).prev().slideToggle();
     $(".reveal").slideDown(100);
 });

这两行不符合您的要求，因为它们作用于指定类的所有元素

     $(".reveal").slideDown(100);
    $(".collapse").slideDown(100);
于 2013-03-12T22:48:45.287 回答
0

两个 slideDown 函数调用并不特定于您当前正在执行的 .reveal 和/或 .collapse 。IE

$(".collapse").slideDown(100);

将在页面上找到所有具有 .collapse 类的元素，并将它们向下滑动。无论您刚刚单击了什么元素。

我会将 slideDown 调用更改为与您刚刚单击的元素相关，即类似这样的元素

$('.reveal').click(function() {
    $(this).slideUp(100);
    $(this).next().slideToggle();
    $(this).next().next(".collapse").slideToggle(100);
});
于 2013-03-12T22:49:27.613 回答
0

当你这样做时$(".collapse").slideDown(100);，jQuery 会在所有带有 .collapse 类的东西上运行 slideDown，而不仅仅是与你当前的 this 相关的那个。要解决此问题，请参阅基于其位置的折叠到$(this)。

这样做，使用类似的东西$(this).siblings(".collapse").slideDown(100);

请注意，仅当您将每个文本块包含在其自己的 div 中时，此特定选择器才会起作用。每个文本元素都在自己的 div 中，就像您现在拥有的那样.siblings(".collapse")，选择该类的所有兄弟姐妹的$(this)，collapse仍然会选择这两个collapse元素。

于 2013-03-12T22:59:13.167 回答
0

好的，我认为您应该对您的问题采取不同的方法。

看，jQuery 基本上有两个目的：

  • 从 HTML 页面中选择一个或多个 DOM 元素
  • 以某种方式操作选定的元素

这可以重复多次，因为 jQuery 函数是可链接的（这意味着您可以在函数之后调用函数……）。

如果我正确理解了您的问题，那么您正在尝试构建博客文章列表并仅显示它们的预告片。
用户点击“阅读更多”按钮后，整篇文章被展开。

请记住：jQuery 选择元素的方式与 CSS 非常相似。这使得查询某些元素变得非常容易，但是您需要以良好的方式构建 HTML，就像出于格式化原因所做的那样。

所以我建议你应该为你的每篇文章使用这个基本标记（注意，HTML5 在工作！）：

<article class="article">
    <section class="teaser">
        Hey, I am a incredible teaser text! I just introduce you to the article.
    </section>
    <section class="full">
        I am the articles body text. You should not see me initially.
    </section>
</article>

如果您愿意，可以用元素替换articleandsection元素。div

这是此标记的 CSS：

/* In case you want to display multiple articles underneath, separate them a bit */
.article{
    margin-bottom: 50px;
}

/* we want the teaser to stand out a bit, so we format it bold */
.teaser{
    font-weight: bold;
}

/* The article body should be a bit separated from the teaser */
.full{
    padding-top: 10px;
}

/* This class is used to hide elements */
.hidden{
    display: none;
}

我们创建标记和 CSS 的方式允许我们在下面放置多篇文章。

好的，您可能已经注意到：我完全省略了任何“阅读更多”或“折叠”按钮。这是有意为之。

如果有人在禁用 javascript 的情况下访问博客站点（可能是搜索引擎，或者不支持 JS 的旧手机或其他任何东西），逻辑就会被破坏。此外，许多文本片段，如“阅读更多”和“折叠”，如果它们实际上没有做任何事情并且不是文章的一部分，则它们是不相关的。

最初，没有隐藏文章正文，因为我们没有在hidden任何地方应用 css 类。如果我们将它嵌入到 HTML 中，而某人真的没有 JavaScript，他将无法阅读任何内容。

添加一些 jQuery 魔法

在页面底部，我们嵌入了来自 google CDN 的 jQuery 库。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

这是一种最佳做法，通常会加快您的页面加载时间。由于许多网站都通过此 URL 嵌入 jQuery，因此很有可能它已经在访问者浏览器缓存中，并且不必再次下载。

请注意，http:URL 开头的 被省略了。这会导致浏览器使用页面当前协议，可能是http或https. 如果您尝试通过http协议在https网站上嵌入 jQuery 库，某些浏览器会拒绝从不安全的连接下载文件。

在页面中包含 jQuery 之后，我们将把我们的逻辑添加到脚本标签中。通常我们会将逻辑保存到一个单独的文件中（再次缓存，而不是全部），但这次脚本块就可以了。

最后是一些 JavaScript

首先，我们想用 css-class 隐藏所有元素full，因为只有预告片应该保持显示。使用 jQuery 这很容易：

$('.full').hide();

脚本的开头$('.full')告诉 jQuery：我需要所有带有 CSS-class 的元素full。然后我们对该结果调用一个函数，命名hide()应该明确哪个目的。

好的，在下一步中，我们要在每个预告片旁边添加一些“阅读更多”按钮。这也是一项简单的任务：

$('.teaser').after('<button class="more">Read more</button>');

我们现在选择每个带有 css-class 的元素，teaser并为每个元素附加一些 HTML 代码after()- 一个带有 css-class 的按钮more。

在下一步中，我们告诉 jQuery 观察每个新创建的按钮的点击。当用户单击时，我们希望full在单击的按钮之后使用 css-class 展开下一个元素。

$('.more').on('click', function(){
    //"this" is a reference to the button element!
    $(this).slideUp().next('.full').slideDown();
});

呸，我们在这里做了什么？首先，我们告诉 jQuery 我们想要操作this，它是对单击按钮的引用。然后我们告诉 jQuery 慢慢隐藏那个按钮（因为它不再需要了）slideUp()。

我们立即继续告诉 jQuery 做什么：现在获取next()元素（使用 css-class full）并通过使用 向下滑动它使其可见slideDown()。

这就是 jQuerys 链接的力量！

再次隐藏

但是等等，你希望能够再次折叠文章！所以我们还需要一个“折叠”按钮和一些 JavaScript：

$('.full').append('<button class="collapse">Collapse text</button>');

注意：我们没有使用after()添加此按钮的append()功能，而是使用将按钮放置在具有 css-class 的每个元素中的功能full，而不是在它旁边。这是因为我们希望折叠按钮也与全文一起隐藏。

现在，当用户单击其中一个按钮时，我们也需要执行一些操作：

$('.collapse').on('click', function(){
    $(this).parent().slideUp().prev('.more').slideDown();
});

现在，这很简单：我们从 button 元素开始，将焦点移到它的parent()（包含全文的元素）并告诉 jQuery 通过向上滑动它来隐藏该元素slideUp()。

然后我们使用 css-class 将焦点从全文容器移到它的前一个元素more，这是它的展开按钮，在展开文本时已经隐藏。我们通过调用 慢慢地再次显示该按钮slideDown()。

就是这样 :)
我已经在jsBin上上传了我的示例。

于 2013-03-20T10:16:50.040 回答