Jquery切換按預期行事。試圖獨立地切換部分

我試圖在每個月內獲取信息以獨立點擊按鈕來切換，並根據信息是否顯示來讓按鈕的文本發生更改。我究竟做錯了什麼？頁面的CSS存儲在一個單獨的文檔中Jquery切換按預期行事。試圖獨立地切換部分

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>JavaJam Coffee House</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="javajam.css" rel="stylesheet"> 
    <!--[if lt IE 9]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> 
    </script> 
    <![endif]--> 
    <script src="http:ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> 
    </script> 
    <script> 
     $(document).ready(function(){ 
      $(".toggle_container").show(); 
      $("button").click(function(){ 
      $(this).toggleClass("active").next().slideToggle("fast"); 

       if ($.trim($(this).text()) === 'Hide') { 
        $(this).text('Show More'); 
       } else { 
        $(this).text('Hide');   
       } 

       return false; 
     }); 
     $("a[href='" + window.location.hash + "']").parent(".reveal").click(); 
     }); 

    </script> 
</head> 

<body> 
    <div id="wrapper"> 
    <header> 
     <h1>JavaJam Coffee Class</h1> 
    </header> 

    <nav> 

     <ul> 

      <li><a href="index.html"> Home </a></li> 
      <li><a href="menu.html"> Menu </a></li> 
      <li><a href="music.html"> Music</a></li> 
      <li><a href="jobs.html"> Jobs</a></li> 

     </ul> 

    </nav> 

    <main> 
     <p> 
     The first Friday night each month at JavaJam is a special night. Join us from 
     8pm to 11pm for some music you won&rsquo;t want to miss! 
     </p> 

     <h2>January</h2> 
     <div class="toggle_container"> 
      <p> 
       <p class="details"> 
       <a href="images/melanie.jpg"> 
       <img src="images/melaniethumb.jpg" height="80" width="80" alt="Melanie Morris thumbnail" class="floatleft"> 
       </a> 
       Melanie Morris entertains with her melodic folk style. Check out 
       the podcast! CDs are now available. 
      </p> 
      <button>Hide </button> 
     </div>  

     <h2>February</h2> 
     <div class="toggle_container"> 
      <p> 
       <p class="details"> 
       <a href="images/greg.jpg"> 
       <img src="images/gregthumb.jpg" height="80" width="80" alt="Tahoe Greg thumbnail" class="floatleft"> 
       </a> 
       Tahoe Greg&rsquo;s back from his tour. New songs. New stories. CDs are now available. 
      </p> 
      <button>Hide </button> 
     </div>  

    </main> 

    <footer> 
     Copyright &copy; JavaJam Coffee House 
     <br> 
     <a href="mailto:[email protected]">[email protected]</a> 
    </footer> 
    </div> 
</body> 
</html>

來源

2015-03-03 jsmitty82

你在找這個嗎？

$(document).ready(function(){ 
 
      $(".toggle_container").show(); 
 
      $("button").click(function(){ 
 
      $(this).toggleClass("active").prev().slideToggle("fast"); 
 

 
       if ($.trim($(this).text()) === 'Hide') { 
 
        $(this).text('Show More'); 
 
       } else { 
 
        $(this).text('Hide');   
 
       } 
 

 
       return false; 
 
     }); 
 
     $("a[href='" + window.location.hash + "']").parent(".reveal").click(); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <header> 
 
     <h1>JavaJam Coffee Class</h1> 
 
    </header> 
 

 
    <nav> 
 

 
     <ul> 
 

 
      <li><a href="index.html"> Home </a></li> 
 
      <li><a href="menu.html"> Menu </a></li> 
 
      <li><a href="music.html"> Music</a></li> 
 
      <li><a href="jobs.html"> Jobs</a></li> 
 

 
     </ul> 
 

 
    </nav> 
 

 
    <main> 
 
     <p> 
 
     The first Friday night each month at JavaJam is a special night. Join us from 
 
     8pm to 11pm for some music you won&rsquo;t want to miss! 
 
     </p> 
 

 
     <h2>January</h2> 
 
     <div class="toggle_container"> 
 
      <p> 
 
       <p class="details"> 
 
       <a href="images/melanie.jpg"> 
 
       <img src="images/melaniethumb.jpg" height="80" width="80" alt="Melanie Morris thumbnail" class="floatleft"> 
 
       </a> 
 
       Melanie Morris entertains with her melodic folk style. Check out 
 
       the podcast! CDs are now available. 
 
      </p> 
 
      <button>Hide </button> 
 
     </div>  
 

 
     <h2>February</h2> 
 
     <div class="toggle_container"> 
 
      <p> 
 
       <p class="details"> 
 
       <a href="images/greg.jpg"> 
 
       <img src="images/gregthumb.jpg" height="80" width="80" alt="Tahoe Greg thumbnail" class="floatleft"> 
 
       </a> 
 
       Tahoe Greg&rsquo;s back from his tour. New songs. New stories. CDs are now available. 
 
      </p> 
 
      <button>Hide </button> 
 
     </div>  
 

 
    </main> 
 

 
    <footer> 
 
     Copyright &copy; JavaJam Coffee House 
 
     <br> 
 
     <a href="mailto:[email protected]">[email protected]</a> 
 
    </footer> 
 
    </div>

來源

2015-03-03 05:06:33 Nooh

的.details元件是被點擊的按鈕的前一個兄弟所以使用.prev()代替.next()。

另外在你的html中還有一個額外的p元素在p.details元素之前，刪除它。

$(document).ready(function() { 
    $(".toggle_container").show(); 
    $("button").click(function() { 
     $(this).toggleClass("active").prev().slideToggle("fast"); 

     if ($.trim($(this).text()) === 'Hide') { 
      $(this).text('Show More'); 
     } else { 
      $(this).text('Hide'); 
     } 

     return false; 
    }); 
    $("a[href='" + window.location.hash + "']").parent(".reveal").click(); 
});

演示：Fiddle

來源

2015-03-03 05:07:13

Jquery切換按預期行事。試圖獨立地切換部分

回答

相關問題