使用jQuery中的鏈接展開/摺疊div

我看了其他的例子，我一直沒能弄清楚。我正在嘗試使用jQuery中的鏈接來展開和摺疊div。我有所有的鏈接，並設置一個onclick函數。在onclick函數中，我正在測試以查看鏈接等於什麼，然後確定如何從那裏繼續。使用jQuery中的鏈接展開/摺疊div

的一部分，我被困在是如何讓隱藏的div的onclick函數中調用.hide（）

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Expand/Collapse</title> 
    <link rel="shortcut icon" href="images/favicon.ico"> 
    <link rel="stylesheet" href="index.css"> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
    <script src="subset_expansion.js"></script> 
    <script type="text/javascript"> 
     var loadFunction = function() 
     { 
      // gather the links 
      var links = $("a").each(function(){}); 

      // set an onclick listener 
      links.click(function(evt) 
      { 
       var linkText = $(this).text(); 

       if (linkText == "Show more") 
       { 
        // get the "hide" divs and expand them 
       } 
       else if (linkText == "Show less") 
       { 
        // get the "hide" divs and collapse them 
       } 
      }) 
     } 

     $(document).ready(loadFunction); 
    </script> 
</head> 

<body> 
    <section id="jdom"> 
     <h1>Murach's JavaScript and DOM Scripting</h1> 
     <h2>Book description</h2> 
     <div> 
      <p>You can read other JavaScript books from start to finish and still not 
      know how to develop dynamic websites like you want to. That's because 
      it's DOM scripting that lets you do things like run slide shows, handle image 
      rollovers, rotate headlines, provide animation, and more. And it's a subject 
      that's glossed over or ignored in most other books.</p> 
     </div> 
     <div class="hide"> 
      <p>But now, you can go from JavaScript beginner to DOM scripting expert in a 
      single book! Fast-paced, professional, and packed with expert practices, our 
      new JavaScript book guides you through each step as you learn how to program 
      sites that enhance the user experience and ensure browser compatibility.</p> 
     </div> 
     <a href="#" id="">Show more</a>   

     <h2>About the author</h2> 
     <div> 
      <p>Ray Harris is an expert JavaScript programmer. That will be obvious to you 
      as soon as you review the 20 complete applications that he presents in this 
      book.</p> 
     </div> 
     <div class="hide"> 
      <p>Ray Harris is much more than a JavaScript programmer. He has a Master's degree 
      in Computer Science and Artificial Intelligence. He worked on advanced 
      research projects at the Air Force Research Lab while he was in the USAF. 
      He taught information security and web development at the College of 
      Technology in Raleigh, North Carolina. In fact, Ray has been programming 
      and teaching since he was 12 years old.</p> 
      <p>So when Ray said he wanted to write for us, it didn't take us long to hire 
      him. Not only did he have the technical skills that we were looking for, 
      but his previous writings showed that he had an uncommon ability to think, 
      write, and teach.</p> 
     </div> 
     <a href="#">Show more</a> 

     <h2>Who this book is for</h2> 
     <div> 
      <p>Due to our unique presentation methods and this book's modular organization, 
      this is the right book for any web developer who wants to use JavaScript effectively.</p> 
     </div> 
     <div class="hide"> 
      <p>Here's just a partial list of who can use this book:</p> 
      <ul> 
       <li>Web developers who know HTML and CSS and are ready to master JavaScript.</li> 
       <li>Web developers who program in ASP.NET, JSP, or PHP on the server side and 
       now want to master client-side coding.</li> 
       <li>Web developers who have already read 3 or 4 JavaScript or DOM scripting books 
       but still don't know how to do the type of DOM scripting that's required in 
       real-world applications</li> 
      </ul> 
     </div> 
     <a href="#">Show more</a>    

    </section> 
</body> 
</html>

來源

2014-10-31 user3776241

什麼是表演更應該鏈接切換？它是'.hide'元素中的文本，還是應該顯示下一個項目？ – Kyle 2014-10-31 19:59:24

試試這個

$(document).on('click', 'a' function() { 
    $(this).closest('div.hide').toggle(); 
});

來源

2014-10-31 20:05:10 Gjohn

明白了，謝謝:) – user3776241 2014-10-31 20:13:58

使用jQuery中的鏈接展開/摺疊div

回答

相關問題