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

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

转载作者：行者123 更新时间：2023-11-28 06:26:24

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>