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

【问题标题】：How to put javascript inside media query condition如何将javascript放入媒体查询条件中
【发布时间】：2018-05-30 18:22:19
【问题描述】：

我想将 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>

请多多帮助，非常感谢。

【问题讨论】：

不能在 CSS 中添加脚本
CSS 和 JavaScript 是两个截然不同的独立事物。您不能将 HTML 或 JavaScript 放入 CSS 规则中。做你想做的事，添加一个onload / onresize 监听器到window 并在那里设置。
jsfiddle.net/9fwm3zpy
感谢您的澄清。我是 javascript 新手，所以我还在调整中。

标签： javascript html css media-queries

【解决方案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>

【讨论】：

告诉我更多帮助
谢谢先生。以后会试试的。非常感谢:)

【解决方案2】：

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

    
    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();
    });

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

【讨论】：

谢谢先生。以后会试试的。非常感谢:)

【解决方案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 则另当别论）。

希望对你有帮助。

【讨论】：

这对先生帮助很大。感谢您的回复:)