Question

我不确定使用何种语言或如何执行此操作，但我希望在页面上有一个单词，并且在单击时，它将显示更多内容。如果再次点击它，那些东西会再次隐藏起来？有什么想法吗？

Answer 1

基本上，您需要操纵要隐藏/显示的元素的display CSS属性：

<span id="showHide">Show</span>
<div id="foo" style="display:none">Here is some text</div>

<script>
document.getElementById("showHide").onclick = function() {
    var theDiv = document.getElementById("foo");
    if(theDiv.style.display == 'none') {
        theDiv.style.display = 'block';
        this.innerHTML = 'Hide';
    } else {
        theDiv.style.display = 'none';
        this.innerHTML = 'Show';
    }
}
</script>

Answer 2

我推荐使用javascript并使用jQuery .show（）＆amp; .hide（）方法：

http://api.jquery.com/show/

http://api.jquery.com/hide/

http://www.learningjquery.com/2006/09/slicker-show-and-hide

Answer 3

你可以用jQuery做这个，这里有一个随时可用的例子：

http://jsfiddle.net/8sDLg/

$(function() {$('div.more').hide()
  $('a.showmemore').click(function(){
  $(this).next('div').slideToggle()
})})

Answer 4

将内容放入div样式display:none;。在单词的onClick处理程序中（可以是链接或按钮），在''（表示“默认”）和'none'

之间切换显示样式

Answer 5

<强> I created a demo for you here.

您可以使用 jQuery 来简化生活：

<a href="#" id="link">Show/Hide</a>
<div id="mydiv">Some content</div>

<强> jQuery的：

$(function(){
  $('#link').click(function(){
    $('#mydiv').slideToggle();
    return false;
  });
});

可以看出，slideToggle()为你做了诀窍：）

Answer 6

执行摘要：使用框架插件

长版：

你可以使用javascript - 更有可能与javascript框架结合使用，比如jQuery。这将涉及为单词添加一个单击处理程序（实际上是围绕它的span标记）并且有一种方法可以检索额外信息以显示为工具提示 - 这里有很多插件。在这里或使用谷歌搜索“jquery tooltip”：这里只有一个example。

或者，您可以使用span标记环绕单词，并为标记添加title属性。将鼠标悬停在单词上（实际上是标记）会显示浏览器的默认工具提示。这可能是一个简单的方法来开始它 - 事实上，这可能是JavaScript解决方案的开始。使用click事件的标签并从title属性中获取数据 - 可能是通过在页面加载时将标题存储在jQuery数据中，然后在点击时从数据中获取文本，这样就不会与浏览器发生冲突工具提示行为。许多插件都以这种方式运行。

Answer 7

快速了解如何避免使用仅限JS的解决方案。我在这里使用jQuery，因为编写代码更快，但正如我上面提到的，如果这是你唯一的JS功能，它只会为一些微不足道的附加功能添加一个重量级的文件。

<script type="text/javascript">
  jQuery(function() {
    $(".article .additional")
      .hide()
      .before("<a href='#'>")
      .prev()
        .text("more")
        .click(function() {
           $(this).next().toggle()
         })
  });
</script>

<div class="article">
  <h2>Some headline</h2>
  <p>Some intro text that is always visible</p>
  <div class="additional">
    <p>Some extra text that is hidden by JS</p>
    <p>But will stay visible if the visitor doesn't have JS</p>
  </div>
</div>

如您所见，HTML完全是独立的。仅当支持JavaScript时，才会添加“更多”链接并隐藏其他内容，以便非JS用户仍然可以阅读所有文本，并且没有无用的“更多”链接。

Answer 8

使用纯HTML和CSS而不使用JavaScript的另一种优雅方法。

HTML：

here goes text before 
<label class="details">
    <input type="checkbox" /><span>here come some details</span><em> </em>
</label> 
and after

CSS：

.details input,
.details span {
    display: none;
}
.details input:checked~span {
    display: inline;
    border-bottom: dotted 1px gray;
}
.details em:after {
    content: "show...";
}
.details input:checked~em:after {
    content: "...hide";
}

点击显示更多 - 也许JS？

8 个答案: