php - jquery 不适用于每个 href 元素

Question

1. 当第一次点击“阅读更多”href 时，div 发生了变化。第一次点击它展开，第二次点击它缩小。
2. 但它不适用于其他 href 元素

3. 如何解决这个问题。请帮助我。

    <script>
        $(document).ready(function(){
            $('#more').click(function(){
               var toggleheight = $("#readmore").height() == 500 ? "100px" : "500px";
                     $('#readmore').animate({ height: toggleheight });
                     });
              });
   
        </script>
   

4. 这是php代码

        <?php
         mysql_query("SET NAMES 'utf8'");
         $set_news=mysql_query("SELECT solution_date,Category,solution FROM solution ORDER BY solution_date DESC LIMIT 10",$connection);
           if(!$set_news){
           die("database query failed".mysql_error()); 
                           }
   
                           for($i=1;$i<=10;$i++) {
                           $rowofnews=mysql_fetch_array($set_news);
   
                           $category=$rowofnews['Category'];
                           $solution=$rowofnews['solution'];
   
                           echo ('<li>');
                           echo ('<div id="readmore"');
                           echo('<h2>');
                           echo $category;
                           echo('</h2><p>');
                           echo $solution;
                           echo('</p></div>');
                           echo('<p><span><a href="#" class="more" id="more">Read More</a></span></p></li>');
                           }
           ?>
   

Answer 1

ID 是唯一的，不允许重复 ID 引用 http://css-tricks.com/the-difference-between-id-and-class/了解更多详情。

并尝试将您的脚本更改为

 <script>
   $(document).ready(function(){
      $('.more').on('click', function(){
         var toggleheight = $(".readmore").height() === 500 ? "100px" : "500px";
            $('.readmore').stop().animate({ height: toggleheight });
            });
       });
 </script>

jQuery.stop()停止当前运行的动画。