JQuery

1个成员

基于jQuery实现右侧列表显示隐藏实现代码

发表于 2017-01-29 2744 次查看
本文章详细的介绍了关于基于jQuery实现右侧列表显示隐藏实现,点击下面的“向下”按钮列表展开显示完整,同时“向下”按钮变成“向上”按钮,点击则隐藏部分,有需要的朋友可参考一下。

php

 代码如下 复制代码

<div class="widget" id="diary1">
  <h3><?php _e('Random Posts', 'zbench'); ?></h3>
  <ul>
   <?php
   $rand_posts = get_posts('numberposts=16&orderby=rand');
   foreach( $rand_posts as $post ) :
   ?>
   <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
   <?php endforeach; ?>
  </ul>
  <span class="more_article1"><a href="#"><img src="hwp-includes/images/widget_btn_down.png"></a></span>
 </div>
 
<?php } ?>
 

<!--显示个人日志-->
 

<div class="widget" id="diary2">
  <h3>个人日志</h3>
  <ul>
   <?php
   $person_posts = get_posts('numberposts=16&category=5');
   foreach( $person_posts as $post ) :
   ?>
   <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
   <?php endforeach; ?>
  </ul>
  <span class="more_article2"><a href="#"><img src="hwp-includes/images/widget_btn_down.png"></a></span>
 </div>

html

 

 代码如下 复制代码
  <!--显示和隐藏效果-->
 <script type="text/javascript">
   $(document).ready(function(){
     var $hiden1=$("#diary1 ul li:gt(7)");
   var $hiden2=$("#diary2 ul li:gt(7)");
   var $hiden3=$("#diary3 ul li:gt(7)");
     $hiden1.hide();
   $hiden2.hide();
   $hiden3.hide();
   var $more1=$(".more_article1");
   var $more2=$(".more_article2");
   var $more3=$(".more_article3");
   $(".more_article1,.more_article2,.more_article3").mouseover(function(){
    $(this).addClass("more_color").mouseout(function(){
     $(this).removeClass("more_color");
    });
   });
   $more1.toggle(function(){
    $hiden1.show();
    $(".more_article1 img").attr("src","hwp-includes/images/widget_btn_up.png");
 
   },function(){
    $hiden1.hide();
    $(".more_article1 img").attr("src","hwp-includes/images/widget_btn_down.png");
 
   });
   $more2.toggle(function(){
    $hiden2.show();
    $(".more_article2 img").attr("src","hwp-includes/images/widget_btn_up.png");
 
   },function(){
    $hiden2.hide();
    $(".more_article2 img").attr("src","hwp-includes/images/widget_btn_down.png");
 
   });
   $more3.toggle(function(){
    $hiden3.show();
    $(".more_article3 img").attr("src","hwp-includes/images/widget_btn_up.png");
 
   },function(){
    $hiden3.hide();
    $(".more_article3 img").attr("src","hwp-includes/images/widget_btn_down.png");
 
   });
   return false;
   });
 </script>
发表回复
你还没有登录,请先登录注册