我正在使用 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>
谢谢!
最佳答案
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>
关于带下拉菜单的 JavaScript 和 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52622920/