Question

窗口调整大小时，切换按钮出现问题。问题是我点击了显示项目列表的切换，我将其保持打开状态，但是当我调整窗口大小时，尽管我将display:none;放在媒体查询上，切换仍然保持打开状态。

HTML CODE：

   <section id="nextprevsection">
   <h2 id="nextprev">View more projects?</h2>
   <ol class="select">
   <a href="heritagetrails.html"><li>Previous Project</li></a>
   <a href="artmovement.html"><li>Next Project</li></a>
   <a href="work.html"><li>Back to work</li></a>
   </ol>
   </section>

CSS：

.nextprev{
display:none;
}

#nextprev{
display:none;
font-size:16px;
width:200px;
background:url(../img/work/downarrow.png) right no-repeat #333;
color:#FFF;
cursor:pointer;
padding:10px;
margin:auto;
margin-top:-150px;
}

ol.select {
display: none;
background:#666;
width:220px;
margin:auto;
padding:0px;
list-style-type:none;

}

.select{
display:none;   
}
.select a{
color:#FFF;
text-decoration:none;
}

ol.select > li:hover {
background: #aaa;
}

JQUERY CODE：

            //next previous
    var nav = $('#nextprev');
    var selection = $('.select');
    var select = selection.find('li');
    if ($(window).width() >= 768) {
nav.removeClass('active');
selection.css("opacity","none");
    }
else{
     nav.addClass('active');
}

    nav.click(function(event) {
    if (nav.hasClass('active')) {
    nav.removeClass('active');

    selection.stop().slideToggle(200);  

    } else {
    nav.addClass('active');
    selection.stop().slideToggle(200);
    }
    event.preventDefault();
    });


    select.click(function(event) {
    // updated code to select the current language

    $(".select").css("display","none");
    select.removeClass('active');
    $(this).addClass('active');
    });

    </script>

媒体查询代码：

@media screen and (max-width: 768px){
/*Next and previous*/

#nextandprev{
display:none;   
}


  .select{ 
  display:block;
  }

  #nextprev{
  display:block;
  }

  #nextprevsection{
  height:200px;
  margin-bottom:100px;  
  }

  }

Answer 1

嗯，屏幕重新调整大小不一定会调用检测屏幕大小的代码。您有一个选择是设置一个短计时器，定期检查屏幕大小并调用您的代码。

但那是蹩脚的答案。尝试$（window）.resize（function（）{}）;

http://api.jquery.com/resize/

基本上它包装了window.onresize事件（我老实说直到最近都不知道，愚蠢的DOM !!）让你用自己做的事情：）

窗口上的Jquery切换错误使用媒体查询调整大小

1 个答案: