Jquery 显示和隐藏内容

我奇迹般地使用Dreamweaver CS6和我找到的CSS引导模板制作了自己的网页。我是一个新手…我很震惊我已经走到了这一步。供参考的网站：

我的问题: 我想显示和隐藏内容，特别是长段落。可能有“阅读更多”链接或“阅读更多”按钮。我的“服务”页面模板具有“阅读更多”按钮，其代码如下：

<a class="btn btn-secondary pull-right" href="#">Read More</a>

//作为混合物使用

.element {
  .show();
}
.another-element {
  .hidden();
}

我基本上了解如何使用HTML代码。但是其他代码在哪里呢

.element {
  .show();
}
.another-element {
  .hidden();
}

比如去？当我把它放在头上时，它在我的页面上显示为文本

或者，如果我突出显示段落标记中的文本，并通过DW接口将其指定为“隐藏文本”类……文本将隐藏，但我无法引用它以使其显示。我尝试将“类标题”放在href后面，例如“隐藏文本”，它是包装我突出显示的文本的标记，而不是href后面的“#”，但这不起作用

希望这是有意义的。提前感谢您的帮助

您可以使用：

HTML

<button class="button" onclick="$('#more').toggle();">Read More</button>
<div id="more">I understand that if I replace the "#" after href, then I can denote a link for the button to connect to (a picture, website, another page, etc.)

But I want more text to show when the Read More button is pressed. I don't want to link to a different page or file.

CSS Bootstrap page gives the following:

Showing and hiding content Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.</div>

---

您可以使用一些简单的jquery，并针对您希望通过事件处理程序显示的特定元素，如下所示：

$('.btn').click(function() {
    $('.hidden').css( "display", "block !important")
})

---

这将更改css以显示那些隐藏的元素。

您的示例“其他代码”毫无意义。你似乎把JavaScript和CSS混在一起了。好吧……这是我的新手。谢谢你的关注。在我的帖子“CSS引导页面…”中，您评论的“代码”是从CSS引导页面复制和粘贴的。这正是我困惑的地方。我该如何处理这些信息？我应该把它放在哪里？我是否需要制作一个CSS或JavaScript文件才能将其放入？还是在脑袋里？再次感谢你，谢谢你，法比奥。这很有道理。但是我应该把上面提供的“CSS”代码放在哪里呢？它去哪里了？我在头上有过吗？没有，只需将当前按钮替换为第一行，然后添加一个ID为的div（每个div必须不同），因此对于div ID“more”，您的按钮必须指向#more等等。顺便说一句，网站上的工作很好，portfolioSweet也很棒。很多“谢谢你”法比奥！！！！我会试一试，让你知道结果如何。还有，谢谢你的客气话……就像我说的，真不敢相信我已经走了这么远。最好的…它完全有效…我唯一的问题是当页面加载时默认显示“更多”文本。按钮不起作用，按下时隐藏文本。页面现在处于活动状态，您可以看到我的意思。啊，是的。向该div添加一个

class=hidden

，它就会工作。如果没有，只需添加

.hidden{display:none}

。请参阅更新的小提琴

<button class="button" onclick="$('#more').toggle();">Read More</button>
<div id="more">I understand that if I replace the "#" after href, then I can denote a link for the button to connect to (a picture, website, another page, etc.)

But I want more text to show when the Read More button is pressed. I don't want to link to a different page or file.

CSS Bootstrap page gives the following:

Showing and hiding content Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.</div>

body {
    padding:30px;
}
#more {
    height:auto;
    padding:5px;
}

$('.btn').click(function() {
    $('.hidden').css( "display", "block !important")
})