Question

我已应用了切换功能，以便当用户点击时，例如“显示更多”时，会显示一堆更多HTML。现在重新点击会使显示的HTML消失。我知道我可以更改它，以便切换文本更改为“显示更少”，但这不是我想要的。我想要的是“显示更多”切换完全消失，理想情况下，显示的HTML不会出现在切换文本的位置下方，而是位于其顶部，取而代之。这可能吗？我做了很多搜索，但找不到答案。

到目前为止，我已经掌握了基础知识：

<a href="javascript:toggletext('mytext')"><p>Show More</p></a>
<div id="mytext" style="display: none;">
blah blah text and images blah blah
</div>

和

<script>
    function toggletext(cid) {
        if (document.getElementById(cid).style.display == "none") {
            document.getElementById(cid).style.display = "block";
        } else {
            document.getElementById(cid).style.display = "none";
        };
    }
</script>

作为旁注，显示的HTML中包含图像。我希望他们不要预先加载。这是默认值，还是我必须指定它？

提前感谢您的帮助。（如果这个答案存在于别处，我表示歉意。）

Answer 1

有很多方法可以做到这一点。

快速演示：http://jsfiddle.net/f8bd2gbh/
演示2 http://jsfiddle.net/odwfcp83/ - （使用API：slideToggle - http://api.jquery.com/slidetoggle/）
演示3：http://jsfiddle.net/Xam9q/ - ＆gt; （How do I call show/hide function independently）

你遗漏了一些东西，所以我建议你阅读更多内容。 href是超链接引用，您可以在标记中附加事件。使用a标记使用preventDefault来避免任何默认行为。

您甚至可以查找animate API。还有Jquery show / less插件。

希望这个演示为您提供方向，并且可以解决问题。 :)

下面的代码

在click标记的a事件中，它检查is(":visible")并调整节目并相应地隐藏。

许多代码示例之一：

  $("#hulk").click(function () {

      if ($("#mytext").is(":visible")) $("#mytext").hide()
      else $("#mytext").show();
  });

<强> HTML

<a id="hulk"><p>Show More</p></a>

<div id="mytext" style="display: none;">blah blah text and images blah blah</div>

Answer 2

你的HTML应该是这样的：

<div id="data_to_show">
  <button id="show_data">Show More+</button>
  <p id="data_p" style="display:none;">
    some data to show here... 
  </p>
</div>

和javascript：

$(function(){
  $('#show_data').click(function(){
    $('#show_data').hide();
    $('#data_p').show();
  });
});

请注意，在此示例中，无法“显示更少”，因为您希望按钮消失。

Answer 3

如果您希望“显示更多”显示在下方，只需将<a>标记移至<div>标记下方即可。

对于切换，你应该使用jQuery，因为它会让你的生活更轻松。

<强> HTML

<div id="mytext" style="display: none;">
    blah blah text and images blah blah
</div>
<a id="trigger" href="javascript:void(0);"><p>Show More</p></a>

<强> JAVASCRIPT

$('#trigger').bind('click', function(){
    $(this).hide();
    $('#mytext').show();
});

至于图像，这是浏览器的问题。当显示设置为无时，某些现代浏览器不会预加载图像。

点击可以让切换链接消失吗？

3 个答案: