谁帮忙用js写个判断窗口小于768px时，div中的内容部分隐藏，否则显示全部

js

解决方案 »

  1.   

    <html>
    <body>
      
    <div id="test">aaaaa</div>
    <script type="text/javascript">
        if(document.body.scrollWidth < 768){
          document.getElementById('test').style.display = 'none';
        }
    </script>
    </body>
    </html>
      

  2.   

    自己把body的overflow设置成hidden就可以了，显示不完的直接不会显示出来
      

  3.   

    <!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>
    <script src="js/jquery-1.7.1.min.js" language="javascript" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
    function windowHeight() {
        var de = document.documentElement;
        return self.innerHeight||(de && de.clientHeight)||document.body.clientHeight;
    }
    window.onload=window.onresize=function(){
    var wh=windowHeight();
     if(wh > 500)//如果窗口大于600
      {
     $(".menu-one li > ul").slideDown(1000);
    }//设置为显示
     else //if(wh < 500)如果窗口大于600
      {
     $('.menu-one li > ul').slideUp(1000);
     $(function(){
       var accordion_head = $('.menu-one > li > div.dv'),
    accordion_body = $('.menu-one li > .menu-two');
    // Open the first tab on load
    accordion_head.first().addClass('xz').next().slideDown(1000);
    // Click function
    accordion_head.on('click', function(event) {
    // Disable header links

    event.preventDefault();
    // Show and hide the tabs on click
    if ($(this).attr('class') != 'xz'){
    accordion_body.slideUp(1000);
    $(this).next().stop(true,true).slideToggle(1000);
    accordion_head.removeClass('xz');
    $(this).addClass('xz');
    ;
    }

    });

    })
     }//设置为隐藏度}
    </script>
    <style type="text/css">
    h3{margin:0;}
    .side{}
    .side ul{margin:0; padding:0;}
    .side ul li{ list-style:none;}.side ul li{width:200px; border:1px solid #F33; margin-bottom:15px;}
    .side ul li .dv{ display:block;height:35px; background:#FCC;}
    .side ul li .dv.zx{ color:#F06;}
    .side ul li .menu-two{height:100px; background:#CCC; display:none;}
    </style>
    </head><body>
    <div class="side">
    <ul class="menu-one">
         <li>
                <div class="dv">11</div>
                <ul class="menu-two"></ul>
            </li>
            <li>
                <div class="dv">11</div>
                <ul class="menu-two"></ul>
            </li>
            <li>
               <div class="dv">11</div>
               <ul class="menu-two"></ul>
            </li>
        </ul>
    </div>
    </body>
    </html>引进 jQuery 库