Expand All Javascript问题

Question

我在Javascript上还不是最好的。我不明白为什么这个扩展/扩展全部脚本不再起作用。它以前是工作的，在一个月不看它之后，发生了一些事情，它不再工作了。这是一个包含神话和事实列表的页面，这些列表可以展开以阅读答案，并在阅读后折叠，顶部有一个展开全部按钮，以便于使用。

代码如下：

​

expand: function() {
  $('.expand').find('p').hide();

  $('.expandall').click(function() {
    if ($(this).hasClass('closed')) {
      $(this).removeClass('closed');
      $('.expand').each(function() {
        $(this).addClass('expanded');
        $(this).find('p').slideDown();
      });
    } else {
      $(this).addClass('closed');
      $('.expand').each(function() {
        $(this).removeClass('expanded');
        $(this).find('p').slideUp();
      });
    }
  });
  $('.expand').click(function() {
    if ($(this).hasClass('expanded')) {
      $(this).removeClass('expanded');
    } else {
      $(this).addClass('expanded');
    }

    $(this).find('p').slideToggle();
  });
}
};

.main .content {
  width: 68%;
  float: right;
  margin: 12px 0 0 0;
}

.main .content h2 {
  margin: 0;
}

.information {}

.information .expand {
  margin: 0 0 10px 0;
}

.information .expand h4 {
  color: #dd995a;
  background: url(images/expandocons.png) top left no-repeat;
  padding: 0 0 10px 45px;
  display: block;
  cursor: pointer;
  margin: 1em 0 0 0;
  min-height: 38px;
}

.information .expanded h4 {
  color: #a6848d;
  background-position: left -104px;
}

.information .expand p {
  padding: 10px;
  margin: 0 0 0 40px;
  overflow: hidden;
}

.information .expand.expanded p {
  background: #f6f0ea;
}

.information #commit {
  background: url(images/commit.png) center no-repeat;
  width: 216px;
  height: 30px;
  text-indent: -9999px;
  display: block;
  margin: 10px 0;
}

.expandall {
  margin: 2em 0;
  color: #FFF;
  width: 180px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  padding: 3px 5px;
  background: #b2959d;
  border-radius: 4px;
}

<div class="section main">

  <div class="content">

    <div class="information">
      <h2>Myths and Facts about Becoming a Foster Family</h2>
      <br> Foster parenting is both a challenge and a privilege. It requires dedication, patience, and lots of love. Here are some common myths and facts about being a foster parent in South Dakota.
      <br>
      <p class="expandall closed">Expand/Hide All</p>

      <div class="expand">
        <h4>Myth: Foster parents must be married and must also have children.</h4>
        <p style="display: none;">Fact: Foster parents do not need to be married or have children.</p>
      </div>
      <div class="expand">
        <h4>Myth: Older people cannot be foster parents.</h4>
        <p style="display: none;">Fact: Foster parents must be at least 21 years old. There are no other age requirements.</p>

      </div>

​

提前感谢您的帮助！

Answer 1

你并不真的需要所有的代码。您可以简单地在显示/不显示段落元素之间切换：

​

$('.expand').on('click', function() {

  // toggle only the paragraphs in the context of `.expand`
  $('p', this).toggle('show');
});

$('.all').on('click', function () {
  $('p').toggle('show');
});

.expand p {
  display: none;
}

.sbow {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <button class="all">Expand/Hide All</button>
  <div class="expand">
    <h4>Myth: Foster parents must be married and must also have children.</h4>
    <p>Fact: Foster parents do not need to be married or have children.</p>
  </div>
  <div class="expand">
    <h4>Myth: Older people cannot be foster parents.</h4>
    <p style="display: none;">Fact: Foster parents must be at least 21 years old. There are no other age requirements.</p>
  </div>
</div>

​