Question

以下代码适用于“一个显示/隐藏文本”流程

<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/点击任意点击此处阅读更多内容... 请注意折叠文本如何显示在段落的底部，并且不会消失。单击“折叠”，它会显示更多文本。

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

Answer 1

代码

 $('.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);

Answer 2

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

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

将在页面上找到类.collapse的所有元素，然后向下滑动它们。不管你刚刚点击了什么元素。

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

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

Answer 3

当你执行$(".collapse").slideDown(100);时，jQuery会在.collapse类的所有内容上运行slideDown，而不仅仅是与当前这个相关的那个。要解决此问题，请参阅基于其位置的展开$(this)。

请执行此操作，使用$(this).siblings(".collapse").slideDown(100);

之类的内容

请注意，只有将每个文本块包含在自己的div中时，此特定选择器才有效。每个文本元素都在自己的div中，就像现在一样，.siblings(".collapse")选择$(this)类collapse的所有兄弟姐妹，仍会选择{{1}元素。

Answer 4

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

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

从HTML页面中选择一个或多个DOM元素
以某种方式操纵所选元素

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

如果我正确地理解了您的问题，那么您正在尝试构建一个博客帖子列表，并且只显示它们的预告片。
用户点击＆＃34;阅读更多＆＃34;按钮，完整的文章得到扩展。

请记住：jQuery非常像CSS一样选择你的元素。这使得它非常容易提出了对某些元素的查询，但是你需要以一种好的方式构建HTML，比如你会出于格式化的原因。

所以我建议你应该为每篇文章使用这个基本标记（抬头，HTML5在工作！）：</ p>

<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>

如果您愿意，可以将article和section元素替换为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的方式允许我们在下面放置多篇文章。

好的，您可能已经注意到：我完全省略了任何＆＃34;阅读更多＆＃34;或者＆＃34;崩溃＆＃34;纽扣。这是通过意图完成的。

如果有人在禁用javascript的情况下访问博客网站（可能是搜索引擎，或者不支持JS或其他任何内容的旧手机），逻辑将被打破。此外，许多文字片段如＆＃34;阅读更多＆＃34;和＆＃34;崩溃＆＃34;如果他们实际上没有做任何事情并且不属于文章的一部分，则无关紧要。

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

添加一些jQuery魔法

在页面底部，我们将嵌入谷歌CDN中的jQuery库。

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

这是最佳做法，通常可以加快页面加载时间。由于许多网站都嵌入了 jQuery通过这个URL，很可能它已经在访问者浏览器缓存中并且没有另一次下载。

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

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

最后一些JavaScript

首先，我们希望使用css-class full隐藏所有元素，因为只有teasers应该保持显示。使用jQuery非常简单：

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

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

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

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

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

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

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

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

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

这就是jQuerys链接的力量！

再次隐藏

但是等等，你想再次折叠文章！所以我们需要一个＆＃34;崩溃＆＃34;按钮，也是更多JavaScript：

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

注意：我们没有使用after()函数添加此按钮，但append()函数用于放置按钮 INSIDE每个元素都使用css-class full，而不是紧挨着它。这是因为我们想要的折叠按钮也可以隐藏全文。

现在，当用户点击其中一个按钮时，我们需要采取一些措施：

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

现在，这很容易：我们从按钮元素开始，将焦点移动到parent()（包含全文的元素）并告诉jQuery通过向上滑动来隐藏该元素{1}}。

然后我们使用css-class slideUp()将焦点从全文容器移动到其前一个元素，这是展开文本时隐藏的扩展按钮。我们通过致电more再次慢慢显示该按钮。

是的，这就是它:) 我已将我的示例上传到jsBin。

展开/折叠文本

4 个答案:

添加一些jQuery魔法

最后一些JavaScript

再次隐藏