Question

好的，所以这适用于一次打开和关闭一个帖子。当用户点击新帖子时，脚本仍然无法看到它必须将OTHER帖子设置为display =“none”。因此，如果我在第一个帖子之后单击第二个帖子标题，则需要隐藏与第一个帖子相关联的内容，而div则显示第二个帖子的文本。并通过多个帖子标题继续。你认为最好的方法是什么？这是打开和关闭一个主题的代码（单击一次显示，再次单击隐藏）。但点击一个主题，然后另一个主题将内容增加到一起，这不是我想要的...我知道我在一年前做过这个，我只是不记得我是怎么做到的。

<script type="text/javascript">
function togglePost(obj) {
          var obj=document.getElementById(obj);
          if (obj.style.display == "block") obj.style.display = "none";
          else if (obj.style.display = "none") obj.style.display = "block";
    else obj.style.display = "none";
}
</script>

<div id="container">
  <div id="sidebar">
    <h3>Posts</h3>
    <p><span onClick="togglePost('q1')">October</span></p>
    <p><span onClick="togglePost('q2')">November</span></p>
    <p><span onClick="togglePost('q3')">December</span></p>
  </div>

  <div id="center">
    <h1> Main Page of post content</h1>
    <p><div id="q1" style="display:none;">October is...testtext testtext testtext</div></p>
<p><div id="q2" style="display:none;">November is...testtext testtext testtext</div></p>
<p><div id="q3" style="display:none;">December is...testtext testtext testtext</div></p>
 </div>
 <br class="clearfloat" />
</div>

Answer 1

在你的函数中，只需将它们全部设置为display = none，然后显示你想要的那个。

function togglePost(obj) {
          var obj=document.getElementById(obj);
          var was_hidden = obj.style.display == "none";
          $('[id^=q]').hide();
          if (was_hidden) $(obj).show();
}

Answer 2

使用 http://api.jquery.com/toggle/

Answer 3

你可以让你的跨度看起来像这样：

<p><span class="q1">October</span></p>
<p><span class="q2">November</span></p>
<p><span class="q3">December</span></p>

用这个替换你的Javascript：

$(document).ready(function() {

    // unobtrusively attach onclick handlers to all span elements in the sidebar
    // the className of each span corresponds to the ID of the div which it toggles
    $("#sidebar span").click(function() {
        $('#' + $(this).attr("class")).toggle();
    });
});

演示：http://jsfiddle.net/9Nqgs/

Answer 4

因为你在问题中说jQuery我正在讨论可用

function togglePost(id) {
    $('#center div').hide();
    $('#' + id).show();
}

jQuery和内容div之间的切换

4 个答案: