调整菜单大小后消失的页面内容

时间：2017-01-29 20:45:26

标签： jquery html css

我目前正在制作自适应网站。

每次点击菜单栏以调整其大小后，主要内容就会完全消失。我认为它可能是由CSS中的某些元素的高度参数或添加flexbox参数所引起的，但我多次检查它并且找不到原因。

HTML：

<html>
<head>

<title>SimpleReports</title>
<link rel="stylesheet" type="text/css" href="styles/global.css" />
<link rel="stylesheet" href="#">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="scripts/jquery-3.1.1.js"></script>
<script src="scripts/general.js"></script>
</head>

<body>
        <div id="header">
            <div class="logo"><a href="#">X<span>X</span></a></div>
        </div>
        <a class="mobile" href="#"><span><i class="fa fa-bars" aria-hidden="true"></i></span><span>MENU</span></a>

        <div id="container">
            <div class="sidebar">
                <ul id="nav">
                    <li>
                        <a class="selected" href="index.html"><span><i class="fa fa-bar-chart" aria-hidden="true"></i></span><span>Panel analityczny</span></a>
                    </li>
                    <li>
                        <a href="tge.html"><span><i class="fa fa-line-chart" aria-hidden="true"></i></span><span>TGE</span></a>
                    </li>
                    <li>
                        <a href="transakcje.html"><span><i class="fa fa-credit-card-alt" aria-hidden="true"></i></span><span>Transakcje</span></a>
                    </li>
                    <li>
                        <a href="wiadomosci.html"><span><i class="fa fa-envelope-o" aria-hidden="true"></i></span><span>Wiadmości</span></a>
                    </li>
                    <li>
                        <a href="uzytkownik.html"><span><i class="fa fa-user-o" aria-hidden="true"></i></span><span>Użytkownik</span></a>
                    </li>
                </ul>
            </div>  
            <div class="main-content">
                <div class="title">
                XXXX
                </div>
                <div class="main">
                    <div class="widget">
                        <div class="title">x1</div>
                        <div class="chart">asdas sadasd asdas</div>
                    </div>
                    <div class="widget">
                        <div class="title">x2</div>
                        <div class="chart"></div>
                    </div>
                    <div class="widget">
                        <div class="title">x3</div>
                        <div class="chart"></div>
                    </div>
                    <div class="widget">
                        <div class="title">x4</div>
                        <div class="chart"></div>
                    </div>
                </div>
            </div>
        </div>
</body>
</html>

jquery的：

$(document).ready(function(){
    $("a.mobile").click(function(){
        $(".sidebar").slideToggle('fast');

    });
    window.onresize = function(event){
        if($(window).width() > 375){
            $(".sidebar").show();
        }
    };
});

CSS：

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Lato';
}
span + span {
    margin-left: 10px;
}
body {
    background-color: #f2f2f2;
}
.a {
    text-decoration: none;
}
.logo {
    float: left;
    margin-top: 14px;
    margin-left: 10px;

}
.logo a {
    size: 1.6em;
    color: #f2f2f2;
}
.logo a span {
    font-weight: 300;
}

div#header {
        position: absolute;
        width: 100%;
        height: 50px;
        background-color: #077fad;
        margin: 0 auto;
    }
    div#container {
        width: auto;
        margin: 0 auto;
    }
    /* komputer */
    .sidebar {
        width: 250px;
        background-color: #044762;
        float: left;
        padding-top: 50px;
    }
    ul#nav {
    }
    ul#nav li {
        list-style: none;

    }
    ul#nav li a {
         color: #f2f2f2;
         display: block;
         padding: 20px;
         font-size: 0.8em;
         border-bottom: 1px solid #022431;
         -webkit-transition: 0.2s;
         -moz-transition: 0.2s;
         -o-transition: 0.2s;
         -webkit-transition: 0.2s;
         transition: 0.2s;
    }
    ul#nav li a:hover {
        background-color: #022431;
        color: #fff;
    }
    .mobile {
         display: none; 
    } 

    ul#nav li a.selected {
        background-color: #022431;
        color: #fff;
    }
    .main-content {
        padding-top: 40px;
        margin-left: 260px;
        width: auto;
        overflow: scroll;
        height: auto;
    }
    /* main content styles */
    .main-content .title {
        background-color: #eef1f7;
        border-bottom: 1px solid #b8bec9;
        font-weight: 700;
        color: #333;
        font-size: 18px;
    }
    /* main box container */
    .main {
        display: flex;
        flex-wrap: wrap;
    }
    .widget {
        width: 45%;
        height: 250px;
        margin: 15px;
        border-radius: 6px;
        background-color: #ffffff;
    }
    .widget .title {
        background-color: #eef1f7;
        border-bottom: 1px solid #dfe4ec;
        padding: 10px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        color: #617085;
        font-weight: 400;
    }
    /* tablet */
    @media screen and (max-width: 1024px){
    .main-content {
        margin-left: 100px; 
    }
    .sidebar {
        width: 80px;
    }
    ul#nav li a span:nth-child(2) {
         display: none;
    }
    ul#nav li a i {
         font-size: 1.6em;
         text-align: center; 
    }
    .widget {
        width: 40%;
    }
    }
    /* telefon */
    @media only screen and (max-width: 375px){
    .mobile {
         display: inline-block; 
         position: absolute;
         margin-top: 50px;
         padding: 15px;
         text-align: left;
         background-color: #044762;
         font-size: 1em;
         width: 100%;
         height: 50px;
         color: #fff;
    } 
    .sidebar {
        display: none;
        width: 100%;
        padding-top: 100px;
    } 
    ul#nav li a span:nth-child(2) {
         display: inline-block;
    }
    .main-content {
        margin-left: 0px;
        padding-top: 90px;
        height: auto;
        }
    .widget {
        width: 100%;
    }
    }

    @media only screen and (min-width: 376px){
    .sidebar {
        height: 100%; 
        } 
    .main-content {
        height: 100%; 
    }
    }

有趣的是，在侧栏下添加<p> test </p>元素后， main-content 可见，但填充有一些问题。 你知道可能导致问题的原因吗？

点击之前的外观：

before

之后（没有任何内容）：

after

并在侧边栏下添加了<p> test </p> with test

1 个答案:

答案 0 :(得分：0)

我认为这应该可以解决您的问题。问题是，在CSS媒体查询中，您在多个地方设置了重叠的样式并导致了一些奇怪的功能。滑块菜单的一个大问题是.sidebar菜单设置为具有属性float:left，这意味着您的内容被隐藏在屏幕外的原因是因为它位于屏幕外，因为您的.sidebar是屏幕宽度的100％。

有两种选择：从float:left移除.sidebar或将clear:left添加到.main。我选择删除float，因为当我在codepen上测试它时没有其他重大更改我在评论中链接了你。

除此之外，还有一些针对填充/边距的小视觉修复。

快乐编码

＆＃13;
＆＃13; 
$(document).ready(function() {
  $("a.mobile").click(function() {
    $(".sidebar").slideToggle('fast');

  });
  window.onresize = function(event) {
    if ($('.sidebar').not(':visible') && $(window).width() > 375) {

      $(".sidebar").show();

    }
  };
});
＆＃13; 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Lato';
}
span + span {
  margin-left: 10px;
}
body {
  background-color: #f2f2f2;
}
.a {
  text-decoration: none;
}
.logo {
  float: left;
  margin-top: 14px;
  margin-left: 10px;
}
.logo a {
  size: 1.6em;
  color: #f2f2f2;
}
.logo a span {
  font-weight: 300;
}
div#header {
  width: 100%;
  height: 50px;
  background-color: #077fad;
  margin: 0 auto;
}
div#container {
  width: auto;
  margin: 0 auto;
}
/* komputer */

.sidebar {
  width: 250px;
  float: left;
  background-color: #044762;
}
ul#nav li {
  list-style: none;
}
ul#nav li a {
  color: #f2f2f2;
  display: block;
  padding: 20px;
  font-size: 0.8em;
  border-bottom: 1px solid #022431;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
ul#nav li a:hover {
  background-color: #022431;
  color: #fff;
}
.mobile {
  display: none;
}
ul#nav li a.selected {
  background-color: #022431;
  color: #fff;
}
.main-content {
  padding-top: 40px;
  margin-left: 260px;
  width: auto;
  overflow: scroll;
  height: auto;
}
/* main content styles */

.main-content .title {
  background-color: #eef1f7;
  border-bottom: 1px solid #b8bec9;
  font-weight: 700;
  color: #333;
  font-size: 18px;
}
/* main box container */

.main {
  display: flex;
  flex-wrap: wrap;
}
.widget {
  width: 45%;
  height: 250px;
  margin: 15px;
  border-radius: 6px;
  background-color: #ffffff;
}
.widget .title {
  background-color: #eef1f7;
  border-bottom: 1px solid #dfe4ec;
  padding: 10px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  color: #617085;
  font-weight: 400;
}
/* tablet */

@media screen and (max-width: 1024px) {
  .main-content {
    margin-left: 100px;
  }
  .sidebar {
    width: 80px;
  }
  ul#nav li a span:nth-child(2) {
    display: none;
  }
  ul#nav li a i {
    font-size: 1.6em;
    text-align: center;
  }
  .widget {
    width: 40%;
  }
}
/* telefon */

@media only screen and (max-width: 375px) {
  .mobile {
    display: inline-block;
    padding: 15px;
    text-align: left;
    background-color: #044762;
    font-size: 1em;
    width: 100%;
    height: 50px;
    color: #fff;
  }
  .sidebar {
    display: none;
    width: 100%;
  }
  ul#nav li a span:nth-child(2) {
    display: inline-block;
  }
  .main-content {
    margin-left: 0px;
    padding-top: 90px;
    height: auto;
    clear: left;
  }
  .widget {
    width: 100%;
  }
}
@media only screen and (min-width: 376px) {
  .sidebar {
    height: 100%;
  }
  .main-content {
    height: 100%;
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <div class="logo"><a href="#">X<span>X</span></a>
  </div>
</div>
<a class="mobile" href="#"><span><i class="fa fa-bars" aria-hidden="true"></i></span><span>MENU</span></a>

<div id="container">
  <div class="sidebar">
    <ul id="nav">
      <li>
        <a class="selected" href="index.html"><span><i class="fa fa-bar-chart" aria-hidden="true"></i></span><span>Panel analityczny</span></a>
      </li>
      <li>
        <a href="tge.html"><span><i class="fa fa-line-chart" aria-hidden="true"></i></span><span>TGE</span></a>
      </li>
      <li>
        <a href="transakcje.html"><span><i class="fa fa-credit-card-alt" aria-hidden="true"></i></span><span>Transakcje</span></a>
      </li>
      <li>
        <a href="wiadomosci.html"><span><i class="fa fa-envelope-o" aria-hidden="true"></i></span><span>Wiadmości</span></a>
      </li>
      <li>
        <a href="uzytkownik.html"><span><i class="fa fa-user-o" aria-hidden="true"></i></span><span>Użytkownik</span></a>
      </li>
    </ul>
  </div>
  <div class="main-content">
    <div class="title">
      XXXX
    </div>
    <div class="main">
      <div class="widget">
        <div class="title">x1</div>
        <div class="chart">asdas sadasd asdas</div>
      </div>
      <div class="widget">
        <div class="title">x2</div>
        <div class="chart"></div>
      </div>
      <div class="widget">
        <div class="title">x3</div>
        <div class="chart"></div>
      </div>
      <div class="widget">
        <div class="title">x4</div>
        <div class="chart"></div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题