2016-02-07 20 views
0

This is how the page renders nowjQuery的 - 顯示第一款第1

This is how I want it to render

我認爲它有一些與此代碼做//展開第一個 '節' $( '#手風琴李號碼:第一個') .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> 

回答

0

jsfiddle.net/qrccv1as/

這是你需要什麼,我想。

+1

是的這個作品,謝謝! – himynameis