Question

如果网站将在移动视图中打开，如何触发输入元素的已检查事件。我想在文档加载时处理该检查事件，以便最初我只能显示.portfolio类。请帮我处理这个

.sidebar {
    background-color: black;
    width: 150px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

.sidebar h1 {
    color: white;
}

.portfolio {
    background-color: red;
    position: absolute;
    top: 0;
    left: 150px;
    right: 0;
    bottom: 0;

    -moz-transition: left 0.5s ease;
    transition: left 0.5s ease;
}

input[type=checkbox] {
   display: none;
}

input:checked ~ .portfolio { 
    left: 0;
}

input:checked ~ label {
    left: 0;
}

label {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 150px;
    background-color: blue;

    -moz-transition: left 0.5s ease;
    transition: left 0.5s ease;
}



<div class="main-wrap">
    <input id="slide-sidebar" type="checkbox" role="button" />
        <label for="slide-sidebar"><span>close</span></label>
    <div class="sidebar"><h1>Settings</h1></div>
    <div class="portfolio"><h1>My Portfolio</h1></div>
</div>

Answer 1

以下代码可能会对您有所帮助。

$(document).ready(function(){
  $("#log").text($(window).width());
  $(window).resize(function() {
    var window_width=$(window).width();
    $("#log").text(window_width);
    if(window_width<500)
      $('.sidebar').hide();
    else
      $('.sidebar').show();
    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Window width : 
<div id="log">
</div>
<div class="main-wrap">
    <div class="sidebar"><h1>Settings</h1></div>
    <div class="portfolio"><h1>My Portfolio</h1></div>
</div>

如何在第一次加载页面时使用jquery在移动视图中隐藏侧边栏

1 个答案: