Question

当第一次“阅读更多”href点击时，div更改。首先点击它跨度，当第二次点击它缩小时。
但它不适用于其他href元素

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

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

     </script>

这是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()停止当前正在播放的动画。

Answer 2

如果您尝试选择多个元素，则不应使用ID，您应该按class选择，如下所示：

$('.more').on("click", function(){

jquery不适用于每个href元素

2 个答案: