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来避免特异性冲突，就像快速浮动一样。它们仅适用于块级切换。它们也可以用作mixins。

.hide可用，但它并不总是影响屏幕阅读器，自v3.0.1起不推荐使用。请改用.hidden或.sr-only。

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

HTML：

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

// Classes

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

//用作mixins

.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

Answer 2

您可以使用一些简单的jquery，并使用事件处理程序来定位您想要显示的特定元素，如下所示：

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

这会改变css以显示隐藏的元素。

显示和隐藏内容

2 个答案: