jquery - 显示和隐藏内容

Question

我奇迹般地使用 Dreamweaver CS6 和我找到的 CSS Bootstrap 模板制作了自己的网页。我是一名 ROOKIE...我很震惊我能走到这一步。引用站点:http://www.pauldemarcostudios.com

我的问题:我想显示和隐藏内容，特别是对于长段落。也许带有“阅读更多”链接或“阅读更多”按钮。我的“服务”页面模板包含带有以下代码的“阅读更多”按钮:

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

我知道如果我在 href 之后替换“#”，那么我可以表示按钮连接到的链接(图片、网站、另一个页面等)

但我希望在按下阅读更多按钮时显示更多文本。我不想链接到不同的页面或文件。

CSS Bootstrap 页面提供以下内容:

显示和隐藏内容使用 .show 和 .hidden 类强制显示或隐藏元素(包括屏幕阅读器)。这些类使用 !important 来避免特异性冲突，就像快速 float 一样。它们仅可用于 block 级切换。它们也可以用作混入。

.hide 可用，但它并不总是影响屏幕阅读器，并且从 v3.0.1 开始被弃用。请改用 .hidden 或 .sr-only。

此外，.invisible 可用于仅切换元素的可见性，这意味着它的显示不会被修改并且该元素仍然可以影响文档的流动。

HTML:

<div class="show">...</div>
<div class="hidden">...</div>

//类

.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

//作为混合使用

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

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

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

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

或者，如果我突出显示段落标记中的文本并通过 DW 界面为其分配一个“隐藏文本”类......文本隐藏，但我无法引用它来显示它。我试图将“类标题”......例如“隐藏文本”，这是包装我突出显示的文本的标签，代替 href 之后的“#”，但这没有用。

希望这是有道理的。预先感谢您的帮助!

Answer 1

你可以使用这个:

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>

CSS

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

See Fiddle here