jQuery隐藏显示问题

jquery

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>科普专家</title>
    <link rel="stylesheet" type="text/css" href="css/web/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/web/listStyle.css"/>
    <script src="jquery-1.7.2.min.js" type="text/javascript"></script> 
    <script type="text/javascript">
    $(function(){
    //数据的展示与收缩
    $('.Emore').click(function(){
    if($(this).parent().parent().children('li:gt(3):not(:last)').is(':hidden')){
    $(this).parent().parent().children('li:gt(3):not(:last)').show();
    alert(1);
    }else{
    $(this).parent().parent().children('li:gt(3):not(:last)').hide();
    alert(1);
    }
    });
    //alert($morebtn.html());
    });
    function ss(){
    $('.EperiodicalsList').each(function(){
    var boo=$(this).children('li:gt(3):not(:last)');
    alert(2222);
    boo.hide();
    });
    }
    </script>
    </head><body onload="ss()">
    <div class="main">
    <div class="submenu">
         <div class="baner dzqk"></div>
         <ul class="firstMenu">
                  <li class="menu"><a href="javascript:void(0)" class="firstMenu_a simHei">电子期刊</a></li>
            </ul>
            <div class="clear_b"></div>
        </div><!--左侧导航-->
        <div class="subcontent">
         <div class="location">
             <span class="mrg_left">当前位置： </span><a href="javascript:void(0)">首页 </a><span>&gt;&gt;</span><a href="">电子期刊</a>
            </div><!--当前位置-->
            <div class="subcontent_jidi mrg_top">
             <div class="Eperiodicals">
                 <img src="images/web/book.jpg" class="EperiodicalsImg"/>
                    <span class="EperiodicalsName simHei">北京市科普工作简报 第17卷第19期</span>
                    <ul class="EperiodicalsList">
                      <li><a href="javascript:void(0)">1下基层 听民声 送首届全国“科普讲解大赛”：北京6名选手喜获佳绩 服务 </a></li>
                      <li><a href="javascript:void(0)">2下基层 听民声 送首届全国“科普讲解大赛”：北京6名选手喜获佳绩 服务 </a></li>
                      <li><a href="javascript:void(0)">3下基层 听民声 送首届全国“科普讲解大赛”：北京6名选手喜获佳绩 服务 </a></li>
                      <li><a href="javascript:void(0)">4下基层 听民声 送首届全国“科普讲解大赛”：北京6名选手喜获佳绩 服务 </a></li>
                      <li><a href="javascript:void(0)">5下基层 听民声 送首届全国“科普讲解大赛”：北京6名选手喜获佳绩 服务 </a></li>
                      <li><a href="javascript:void(0)">6下基层 听民声 送首届全国“科普讲解大赛”：北京6名选手喜获佳绩 服务 </a></li>
                      <li><a href="" class="Emore">点击了解更多</a></li>
                  </ul>
                </div>
                <div class="Eperiodicals">
                 <img src="images/web/book.jpg" class="EperiodicalsImg"/>
                    <span class="EperiodicalsName simHei">北京市科普工作简报 第17卷第19期</span>
                    <ul class="EperiodicalsList">
                      <li><a href="javascript:void(0)">下基层 听民声 送首届全国“科普讲解大赛”：北京6名选手喜获佳绩 服务 </a></li>
                      <li><a href="javascript:void(0)">下基层 听民声 送首届全国“科普讲解大赛”：北京6名选手喜获佳绩 服务 </a></li>
                      <li><a href="javascript:void(0)">下基层 听民声 送首届全国“科普讲解大赛”：北京6名选手喜获佳绩 服务 </a></li>
                      <li><a href="javascript:void(0)">下基层 听民声 送首届全国“科普讲解大赛”：北京6名选手喜获佳绩 服务 </a></li>
                      <li><a href="javascript:void(0)">下基层 听民声 送首届全国“科普讲解大赛”：北京6名选手喜获佳绩 服务 </a></li>
                      <li><a href="javascript:void(0)">下基层 听民声 送首届全国“科普讲解大赛”：北京6名选手喜获佳绩 服务 </a></li>
                      <li><a href="" class="Emore">点击了解更多</a></li>
                  </ul>
                </div>
          </div><!--一条数据-->
        </div><!--右侧内容-->
    </div>
    </body>
    </html>
      

  2.   

    执行完show()或者hide()
    为什么会再次执行onload事件()
    求助
      

  3.   

    $(function(){
      //数据的展示与收缩
      $('.Emore').click(function(){
        if($(this).parent().parent().children('li:gt(3):not(:last)').is(':hidden')){
          $(this).parent().parent().children('li:gt(3):not(:last)').show();
          //alert(1);
        }else{
          $(this).parent().parent().children('li:gt(3):not(:last)').hide();
          //alert(1);
        }
        return false; //加上这句
      });
      //alert($morebtn.html());
    });或者把 <li><a href="" class="Emore">点击了解更多</a></li> 改为
    <li><a href="#" class="Emore">点击了解更多</a></li>
    或者用其他标签代替，比如 span总之是要阻止 a 标记跳转
      

  4.   


    谢了，解决了！我是帮美工写的JS， 她href里面什么都没写，我也没注意到