jquery - jquery - 如果宽度小于 767px，则删除 html

Question

目前，我有一个模式弹出窗口（Shadowbox），用于向我们的网站提供“反馈”表单。我对桌面浏览器上的模态很好，但我想在移动浏览器上打开一个新的“页面”（小于 767px）并消除移动设备上的模态复杂性。

是否有一个 jquery 解决方案可以从链接代码中删除 'rel="shadowbox"' 元素，以便它只打开一个新的浏览器窗口？

例子：

桌面版

<a href="site.com" target="_blank" rel="shadowbox">Link</a>

767px 或更少版本

<a href="site.com" target="_blank">Link</a>

到目前为止，我有这个脚本：

<script>
$( "a" )
  .contents()
  .filter(function(){
    return this.nodeType !== 1;
  })
  .remove( "rel="shadowbox"" );
</script>

我无法弄清楚如何首先检测宽度以应用“如果，那么”。

非常感谢您的帮助！诚然，我没有尽可能多地使用 JS。

score 1 · Accepted Answer

if($(window).width() < 768){
    console.log('kill shadowbox');
    $("a[rel='shadowbox']" ).removeAttr('rel');
}

您可能会遇到在删除 shadowbox rel 之前将侦听器附加到元素的问题。

看到这个小提琴

score 0 · Accepted Answer

您可以使用 jquery 的 .css() 函数获取任何 css 属性

if ( $(this).css('width') <= '767' ){

    // Do things here
}

然后你可以给你的链接一个 id 并使用 .removeAttr()

// Do things here
$('#my_a').removeAttr('rel');

score 0 · Accepted Answer

0

if (document.width < 767) {
   $.remove( "rel="shadowbox" );
}

于 2013-08-13T00:22:42.593 回答

3 回答 3