如何在媒体查询中嵌入JavaScript？移动端交互需求求助

嘿，你这里踩了个常见的坑——CSS媒体查询里是不能直接放JavaScript代码的！媒体查询是CSS专属的语法，只能用来定义不同屏幕尺寸下的样式规则，嵌套<script>标签完全不符合规范，浏览器会直接忽略这部分内容，所以你的点击事件根本不会生效。

下面是修正后的方案，分两步实现你的需求：

1. 正确的JavaScript逻辑（单独处理屏幕尺寸判断） #

我们可以通过JS监听页面加载和窗口 resize 事件，判断当前屏幕宽度是否符合移动端条件，再绑定对应的点击行为：

// 封装处理地址切换的函数
function setupAddressToggle() {
  // 先移除已绑定的事件，避免窗口 resize 时重复绑定
  jQuery('.address0.fa-angle-double-down').off('click');

  // 判断当前屏幕是否为移动端
  if (window.innerWidth <= 767) {
    jQuery('.address0.fa-angle-double-down').on('click', function(event) {
      jQuery("#address-1").toggleClass("expand");
      jQuery('.address0.fa-angle-double-down').toggleClass("less-text");
    });
  }
}

// 页面初始化时执行一次
jQuery(document).ready(function() {
  setupAddressToggle();
});

// 监听窗口大小变化，实时更新逻辑
jQuery(window).on('resize', setupAddressToggle);

2. 配合CSS优化非移动端体验 #

为了让非移动端（屏幕宽度≥768px）的体验更合理，可以用媒体查询控制元素状态：

/* 非移动端时，始终展开地址栏并隐藏下拉图标 */
@media only screen and (min-width: 768px) {
  #address-1 {
    display: block !important; /* 匹配你expand类的显示状态 */
  }
  .address0.fa-angle-double-down {
    display: none;
  }
}

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

这样调整后，当屏幕切换到移动端视图时，下拉图标会正常触发切换类的行为；非移动端时，地址栏保持展开，下拉图标也会隐藏，完全符合你的需求~

内容的提问来源于stack exchange，提问作者James Daniel Esmatao