Question

我想把javascript放在媒体查询条件中。我想在将屏幕调整为移动视图时更改元素的行为。这是我的代码。

    @media only screen and (max-width: 767px) {
    <script>
    jQuery(document).ready(function(){
    jQuery('.address0.fa-angle-double-down').on('click', function(event) {        
    jQuery("#address-1").toggleClass("expand");
    jQuery('.address0.fa-angle-double-down').toggleClass("less-text");
    });
    });
    </script>
    }

这是html

    <div class="place">
    <h3><a href="/#/"><i class="fa fa-map-marker"></i> Nevada</a><i 
    class="fa fa-angle-double-down address0" aria-hidden="true"></i></h3>
    <ul>
    <li><i class="fa fa-map-marker"></i> <a href="/#/">Las Vegas</a></li>
    </ul>
   </div>

请多多帮助。

Answer 1

在Jquery if ($(window).width() < 767)中执行：

＆＃13;

$('.address0.fa-angle-double-down').on('click', function(event) {
  if ($(window).width() < 767) {
    $("#address-1").toggleClass("expand");
    $('.address0.fa-angle-double-down').toggleClass("less-text");
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="place">
  <h3><a href="/#/"><i class="fa fa-map-marker"></i> Nevada</a><i class="fa fa-angle-double-down address0" aria-hidden="true"></i></h3>
  <ul>
    <li><i class="fa fa-map-marker"></i> <a href="/#/">Las Vegas</a></li>
  </ul>
</div>

＆＃13;

Answer 2

您需要检查jQuery的width()功能。您可能需要与lodash js库中的debounce函数一起监听resize事件，以处理窗口调整大小的情况。

＆＃13;

    
    function handleClick(e) {
          $("#address-1").toggleClass("expand");
          $('.address0.fa-angle-double-down').toggleClass("less-text");
    }
    
    function handleState() {
    console.log($(document).width());
      if($(document).width() < 767) {
        $('.address0.fa-angle-double-down').on('click', handleClick);
      }
     }
    
    $(document).ready(function(){
      handleState();
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="place">
    <h3><a href="/#/"><i class="fa fa-map-marker"></i> Nevada</a><i 
    class="fa fa-angle-double-down address0" aria-hidden="true"> down</i></h3>
    <ul>
    <li><i class="fa fa-map-marker"></i> <a href="/#/">Las Vegas</a></li>
    </ul>
   </div>

＆＃13;

Answer 3

你可以这样做，但不能在CSS中。您必须创建一个MediaQueryList对象才能这样做。

在你的情况下，你可能会有类似的东西：

var mql = window.matchMedia("only screen and (max-width: 767px)")

// this is called when the MQL status changed
mql.addListener(doStuff);

// this is called if the MQL already matches the query specificed
if (mql.matches) {
   doStuff();
}

检查链接以获取更多详细信息，并注意browser support（现在你应该没有太多问题，但是如果你必须支持IE9则是另一个例子）。

希望它有所帮助。

如何将javascript置于媒体查询条件中

3 个答案: