带下拉菜单的 JavaScript 和 HTML

Question

我正在使用 javascript 开发下拉菜单。我的 HTML 不起作用，我找不到问题...我认为我做对了，但可能是链接不起作用。

$(document).ready(function() {
  $("article.hey > *:not(header)").hide();
  $("article.hey header").on("click", function() {
    $(this).nextAll("*").slideToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <article class="hey">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac metus quis ante elementum tristique sit amet quis lorem. Fusce placerat dignissim nunc vitae consequat. In sagittis velit vitae erat faucibus, vitae condimentum risus luctus. Aliquam
      consequat est pellentesque viverra hendrerit. Duis tincidunt mi sem, et rhoncus ante consequat id. Sed ex est, pulvinar et mi eu, placerat tincidunt lacus. Praesent congue turpis mi, at vestibulum
    </p>
  </article>
</header>

谢谢!

Answer 1

HTML 的结构必须是 article 标签内的 header 标签:

$(document).ready(function() {
  $("article.hey > *:not(header)").hide();
  $("article.hey header").on("click", function() {
    $(this).nextAll("*").slideToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="hey">
  <header>I'm the header 'CLICK ME'</header>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac metus quis ante elementum tristique sit amet quis lorem. Fusce placerat dignissim nunc vitae consequat. In sagittis velit vitae erat faucibus, vitae condimentum risus luctus. Aliquam
    consequat est pellentesque viverra hendrerit. Duis tincidunt mi sem, et rhoncus ante consequat id. Sed ex est, pulvinar et mi eu, placerat tincidunt lacus. Praesent congue turpis mi, at vestibulum
  </p>
</article>