javascript - 如何让隐藏的 HTML 仅在点击时出现在我的弹出窗口中，而不出现在页面的其他地方？

Question

我知道这可能是一个奇怪的请求，但我使用的是弹出窗口，并且该弹出窗口中有一些 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/

Answer 1

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

jsfiddle