javascript - 如何将 javascript 放入媒体查询条件中

Question

我想将 javascript 放入媒体查询条件中。当屏幕调整为移动 View 时，我想更改元素的行为。这是我的代码。

    @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) :

$('.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");
  }
});

<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>