gpt4 book ai didi

jQuery - 在第 1 节下显示第一段

转载 作者:行者123 更新时间:2023-11-28 06:26:24 25 4
gpt4 key购买 nike

This is how the page renders now

This is how I want it to render

我认为这与这段代码有关//Expand first 'section'$('#accordion li p:first').height(125);但我不是 100% 确定。

<!DOCTYPE html> 
<html>
<head>
<!-- This is a comment tag -->
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" href="generic.css" type="text/css" media="screen,projection" />
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">

$( document ).ready(function() {

// Stop the accordion anchor tags from working normally
$('#accordion a[href='#']').on('click', function(e){
e.preventDefault();
});
// Expand the first section
$('#accordion li p:first').height(125);

// Enable accordion
if ($(this).text() == ">")
{
// Collapse expanded one and change to '>'
var expanded = $("#accordion li").has(”a:contains('v')”);
expanded.find('a').text(">");
expanded.find('p').animate({ height: "0" }, 500 );

// Expand collapsed one and change to 'v'
$(this).text("v");
$(this).parents('li').find('p').animate({ height: "125px" }, 500);
}
});

});

</script>
</head>
<body>
<ul id="accordion">
<li><div><a href="#">v</a> Section 1</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur hendrerit ipsum vel vehicula. Sed at fringilla risus. Pellentesque gravida dolor gravida pellentesque sagittis. Morbi placerat enim in scelerisque ultrices. Praesent maximus bibendum est, sit amet lobortis massa consequat placerat. Donec ullamcorper cursus convallis. Sed laoreet sapien ac lacus rutrum finibus. Integer malesuada elit dapibus sagittis condimentum. Ut in mattis tortor, ac mollis odio. Ut lacus arcu, vehicula vitae ex vel, malesuada scelerisque eros. Nunc orci nisl, mollis at urna ut, varius dignissim turpis. Quisque mollis quam lorem, non luctus tortor pellentesque venenatis. Integer laoreet placerat libero ac egestas.<br>Nullam pharetra convallis elementum. Proin et orci euismod, egestas mi non, sodales eros. Sed dictum nunc eros, sed tempor ligula convallis sit amet. Integer pretium sem a dignissim mattis. Cras sagittis, ante vel ultrices ultricies, nibh dolor eleifend nibh, non porta risus erat sed sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis diam tellus, quis auctor enim tristique id.</p></li>
<li><div><a href="#">&gt;</a> Section 2</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur hendrerit ipsum vel vehicula. Sed at fringilla risus. Pellentesque gravida dolor gravida pellentesque sagittis. Morbi placerat enim in scelerisque ultrices. Praesent maximus bibendum est, sit amet lobortis massa consequat placerat. Donec ullamcorper cursus convallis. Sed laoreet sapien ac lacus rutrum finibus. Integer malesuada elit dapibus sagittis condimentum. Ut in mattis tortor, ac mollis odio. Ut lacus arcu, vehicula vitae ex vel, malesuada scelerisque eros. Nunc orci nisl, mollis at urna ut, varius dignissim turpis. Quisque mollis quam lorem, non luctus tortor pellentesque venenatis. Integer laoreet placerat libero ac egestas.<br>Nullam pharetra convallis elementum. Proin et orci euismod, egestas mi non, sodales eros. Sed dictum nunc eros, sed tempor ligula convallis sit amet. Integer pretium sem a dignissim mattis. Cras sagittis, ante vel ultrices ultricies, nibh dolor eleifend nibh, non porta risus erat sed sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis diam tellus, quis auctor enim tristique id.</p></li>
<li><div><a href="#">&gt;</a> Section 3</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur hendrerit ipsum vel vehicula. Sed at fringilla risus. Pellentesque gravida dolor gravida pellentesque sagittis. Morbi placerat enim in scelerisque ultrices. Praesent maximus bibendum est, sit amet lobortis massa consequat placerat. Donec ullamcorper cursus convallis. Sed laoreet sapien ac lacus rutrum finibus. Integer malesuada elit dapibus sagittis condimentum. Ut in mattis tortor, ac mollis odio. Ut lacus arcu, vehicula vitae ex vel, malesuada scelerisque eros. Nunc orci nisl, mollis at urna ut, varius dignissim turpis. Quisque mollis quam lorem, non luctus tortor pellentesque venenatis. Integer laoreet placerat libero ac egestas.<br>Nullam pharetra convallis elementum. Proin et orci euismod, egestas mi non, sodales eros. Sed dictum nunc eros, sed tempor ligula convallis sit amet. Integer pretium sem a dignissim mattis. Cras sagittis, ante vel ultrices ultricies, nibh dolor eleifend nibh, non porta risus erat sed sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis diam tellus, quis auctor enim tristique id.</p></li>
<li><div><a href="#">&gt;</a> Section 4</div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur hendrerit ipsum vel vehicula. Sed at fringilla risus. Pellentesque gravida dolor gravida pellentesque sagittis. Morbi placerat enim in scelerisque ultrices. Praesent maximus bibendum est, sit amet lobortis massa consequat placerat. Donec ullamcorper cursus convallis. Sed laoreet sapien ac lacus rutrum finibus. Integer malesuada elit dapibus sagittis condimentum. Ut in mattis tortor, ac mollis odio. Ut lacus arcu, vehicula vitae ex vel, malesuada scelerisque eros. Nunc orci nisl, mollis at urna ut, varius dignissim turpis. Quisque mollis quam lorem, non luctus tortor pellentesque venenatis. Integer laoreet placerat libero ac egestas.<br>Nullam pharetra convallis elementum. Proin et orci euismod, egestas mi non, sodales eros. Sed dictum nunc eros, sed tempor ligula convallis sit amet. Integer pretium sem a dignissim mattis. Cras sagittis, ante vel ultrices ultricies, nibh dolor eleifend nibh, non porta risus erat sed sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis diam tellus, quis auctor enim tristique id.</p></li>
</ul>
</body>

最佳答案

jsfiddle.net/qrccv1as/

我认为这就是您所需要的。

关于jQuery - 在第 1 节下显示第一段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35256470/

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