如何让隐藏的 HTML 仅在单击时出现在我的弹出窗口中，而不出现在页面的其他位置？答案

【问题标题】：How do I get hidden HTML to appear only in my popover on click, not elsewhere on the page?如何让隐藏的 HTML 仅在单击时出现在我的弹出窗口中，而不出现在页面的其他位置？
【发布时间】：2014-06-15 05:25:43
【问题描述】：

我知道这可能是一个奇怪的请求，但我正在使用一个弹出框，并且该弹出框中有一些 HTML。

但是，当我的链接被点击时，它会同时显示页面底部的 HTML 和弹出窗口中的 HTML。我只希望它仅在弹出窗口中显示 HTML。

这是我的 HTML：

<small class="download-notice">Note: This is not a Physical DVD. Downloading &amp; Streaming Only.<br />
    <a href="#" id="masterclass-popover" data-toggle="popover">Click here for Details about The Masterclass.</a>
</small>


<div id="masterclass-popover-head" class="hidden">Masterclass Contents</div>
<div id="masterclass-popover-content" class="hidden">
    Test Content!
        <ul>Test
            <li>iTem 1</li>
            <li>iTem 2</li>         
        </ul>
</div>

这是我的 JS：

   $(document).ready(function(){
    $("#masterclass-popover").popover({
    html : true,
        placement: 'bottom',
    title: function() {
      return $("#masterclass-popover-head").clone();
    },
    content: function() {
      return $("#masterclass-popover-content").clone();
    }
    });

    $("small.download-notice a").click(function(e) {
    e.preventDefault();    
    });

  $("#masterclass-popover").click(function() {
    $("div#masterclass-popover-head").toggleClass("hidden");
    $("div#masterclass-popover-content").toggleClass("hidden");
  });
});

编辑 1

如果你想重构我的 JS，你会得到一个额外的 +1 - 因为我知道它可能写得很低效。

编辑 2

我包含了指向实时版本的错误链接。这是更新的：http://jsfiddle.net/VB32W/1/

【问题讨论】：

你能解释一下 jsfiddle 中发生的事情，那是不应该的（除了弹出框的大小）？看了之后，我对问题出在哪里感到困惑。
你是否按预期工作？我没有在弹出窗口或页面底部显示任何内容。
我的错....我有一个旧版本的 JSFiddle 链接。刷新帖子。

标签： javascript jquery css twitter-bootstrap-3 popover

【解决方案1】：

$(document).ready(function(){
    $("#masterclass-popover").popover({
        html : true,
        placement: 'bottom',
        title: $("#masterclass-popover-head").text(),
        content: $("#masterclass-popover-content").html(),
    });
});

jsfiddle

【讨论】：

【解决方案2】：

$(document).ready(function(){
$("#masterclass-popover").popover({

html : true,

placement: 'bottom',

title: $("#masterclass-popover-head").html(),

content: $("#masterclass-popover-content").html()

    });

$("small.download-notice a").click(function(e) {
e.preventDefault();
});

});

只需更改您的 javascript 代码。如果您设置了 html:true

，popover 函数将接受 html 作为其标题和内容

JS fiddle edited

【讨论】：