Question

我想使用JavaScript进行非常简单的展开/折叠，当我点击“标题”时，它会显示“文字”（当页面首次加载时会隐藏）。此外，当我再次点击“标题”时，我希望“文本”再次隐藏。

<div>
    <h1>Title</h1>
        <p>Text</p>
</div>

我以前从未使用过jQuery或JavaScript，所以如果你能解释一下这个切换代码是如何工作的话会很棒。感谢。

Answer 1

这应该这样做：

$(function() {

    $('h1').click(function() {
        $(this).next('p').toggle();
    });

});

现在让我解释一下代码。

第一行是接受在文档加载完成后运行的函数。它相当于：

$(document).ready(function() {
    // Stuff to do when the document is ready.
});

中间的代码说，对于每个h1元素，当它被点击时，执行一个函数，找到它旁边的p元素并切换其可见性。第一个选择器中的this引用实际的<h1> DOM元素。我是这样做的，所以如果你有一个类似下面的结构，那么切换只会影响段落旁边的内容。

<div>
    <h1>Section 1</h1>
    <p>Section 1 Content</p>
</div>
<div>
    <h1>Section 2</h1>
    <p>Section 2 Content</p>
</div>

干杯！

Answer 2

使用toggle。

$('h1').bind('click', function(){
    $('p').toggle();
});

Answer 3

DEMO

<head>
  <!-- other content, including jQuery script tag -->
  <script type="text/javascript">
    $(function(){ // trigger when document's ready

      // hide the pragraph initially
      $('p').hide();

      // add a click event to the header so we can hide/show the paragraph
      $('h1').click(function(e){
        // $(this) is the header, next finds the next paragraph sibling (they're both
        // withint he div, so the header and div are known as siblings) then toggle
        // toggles if this found paragraph should be shown or hidden
        $(this).next('p').toggle();
      });
    });
  </script>
</head>

单击DIV指示jQuery查找作为段落的“next”元素（因为标题和段落是同一节点的兄弟），然后toggle s。

我还在代码中添加了一个隐藏，因为在我看来，最好隐藏javascript中的内容，这样如果他们不支持javascript，就不会缺少内容。其他人使用CSS样式并且仅使用javascript显示，这很好，但如果他们没有或禁用页面上的JS，则无法再次查看该内容。

Answer 4

试试这个

$("h1").click(function(){
    $("p").slideToggle(500);
});

单击</p> <h1>时展开<p> </h1>

4 个答案: