gpt4 book ai didi

javascript - LI 被点击并显示另一个 LI 但不显示页面上的其余部分

转载 作者:行者123 更新时间:2023-11-30 16:35:04 25 4
gpt4 key购买 nike

对整个网络开发这件事相当陌生。我有一个 HTML 文档,其中包含一个链接 (LI) 列表,单击该链接时,其下方的区域会展开并显示更多文本。

例如,您有一个书名,当您点击它时,该书的信息就会出现在它下面。您再次单击它或单击页面上的另一个 LI,它就会消失。

我的样式很好,只是似乎无法理解 JavaScript 或 JQuery。这是 HTML:

<li class="parent"><a href="#">The Wheel of Prison Operations: Useful Tool for Successful
Management of Security</a></li>
<ul class="story">
<li>Publication, authored “The Wheel of Prison Operations: Useful
Tool for Successful Management of Security”. June/July1999 issue
of “Correctional Security Report” a national publication on
correctional security operations.</li>
</ul></br>

<li class="parent"><a href="#">Use Of Force - Current Practice and Policy</a></li>
<ul class="story">
<li>Book on Use of Force in Prisons, September 1998, asked to co-author a book on use of force in
prisons to be published by the American Correctional Association on use of force in US and
Canadian Prisons. Use Of Force - Current Practice and Policy Published November 1999.
Advertised as ACA “Bestseller” for several years.</li>
</ul></br>

这是 JavaScript(尝试):

    <script>
$(document).ready(function(){
$(".story").css("visibility", "hidden");

$("li").click(function() {
$(this).children().css("visibility", "visible");
});
});
</script>

和/或这也是,但都没有用

    <script>
$(document).ready(function() {
$('.parent').click(function() {
$('.story').toggleClass('visible');
});
});
</script>

我愿意听取有关如何清理或我可能搞砸的地方的建议。只是想掌握它,因为它很有趣。提前致谢。

最佳答案

从你不能有<br>开始和 <ul>作为 <li> 的 sibling
将 BR 和 UL 标签作为 LI child 放置

修复 HTML 标记后,您可以使用 jQuery 甚至仅使用 CSS

更好的 HTML 标记如下:

<ul id="books">

<li>
<h2>Book 1</h2>
<div>
Book 1 story here
</div>
</li>

<li>
<h2>Book 2</h2>
<div>
Book 2 story here
</div>
</li>

</ul>

这也改变了你的 jQuery 逻辑(至少关于选择器,除了所有滑动书籍内容故事的修复)

这是一个快速演示:

jQuery(function($){

var $allBooksStories = $("#books li > div");

$("#books h2").click(function(){
$allBooksStories.slideUp();
$(this).next("div").stop().slideToggle();
});

});
*{margin:0;}
#books div{
display:none; /*Hide all stories initially*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="books">

<li>
<h2>Book 1</h2>
<div>
Book 1 story here
</div>
</li>

<li>
<h2>Book 2</h2>
<div>
Book 2 story here
</div>
</li>

</ul>

关于javascript - LI 被点击并显示另一个 LI 但不显示页面上的其余部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32817129/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com