显示和隐藏内容

Question

我奇迹般地使用Dreamweaver CS6和我找到的CSS引导模板创建了自己的网页。我是一个ROOKIE...and，我很震惊，我已经走到了这么远。参考网站：http://www.pauldemarcostudios.com

我的问题是:我想展示和隐藏内容，特别是长篇。也许有一个“阅读更多”的链接或一个“阅读更多”按钮。我的“服务”页面模板有以下代码的“读取更多”按钮：

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

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

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

CSS引导页提供了以下内容：

使用.show和.hidden类显示和隐藏要显示或隐藏的元素(包括屏幕阅读器)。这些类使用！重要的是避免特定冲突，就像快速浮动一样。它们只适用于块级切换。它们也可以用作混合器。

.hide是可用的，但它并不总是会影响屏幕读取器，并且在3.0.1版本中不再受欢迎。使用.hidden或. or只读。

此外，.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 interface....the文本隐藏“隐藏文本”类，但我无法引用它以使其显示。我试着把“类标题”....for示例“隐藏文本”(隐藏文本)放在href后面的"#“后面，而不是href后面的”#“后面，这是包装我突出显示的文本的标记。

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

Answer 1

你可以用这个：

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

见Fiddle

Answer 2

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

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

这将改变css以显示这些隐藏元素。