当浏览器窗口<830px，但保留文本

Remove hyperlink when browser window < 830px but leave text

本文关键字：保留 文本 830px 浏览器 窗口 lt      更新时间：2023-09-26

我正在构建一个响应迅速的站点。当浏览器小于830时，我希望ABOUT和PROJECTS链接不链接到它们的类别页面。我仍然希望子菜单链接工作。

当在智能手机或平板电脑上查看该网站时，我希望用户能够单击"关于"选项卡来显示子菜单链接。现在，当我单击"关于"选项卡时，它会滑动打开，但随后会带我进入"关于"页面，因为我单击了链接。

            $("#menu-menu-1 li").click(function () {
            $(this).siblings().find('ul.sub-menu').slideUp('fast');
            $(this).find('ul.sub-menu').slideToggle('fast'); 
            });//.click

http://www.mackeyshotrods.com/store/?page_id=2

我不知道该怎么做。谢谢你的帮助！

如果您的网站直接在手机中打开或在屏幕浏览器中调整大小，这将有所帮助

var windowResize = function () {
  if ($(window).width() < 830) { // your width
  $("#ABOUT").attr("href", "javascript:void(0)");
  }
};
$(document).ready(windowResize);
$(window).resize(windowResize);


记住jquery使用css选择器

这是你想要的

示例集1

在<a>属性中创建一个class="AboutLink"，如下所示，并使用以下jquery（使用此）

<li id="menu-item-277" class="about menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-277 depth">
    <a **class="AboutLink"** href="https://www.mackeyshotrods.com/store/?cat=1">About</a>
    <ul class="sub-menu">
        <li id="menu-item-274" class="what_we_do menu-item menu-item-type-taxonomy menu-item-object-category menu-item-274 depth"><a href="https://www.mackeyshotrods.com/store/?cat=29">What We Do</a>
        </li>
        <li id="menu-item-273" class="meet_the_crew menu-item menu-item-type-taxonomy menu-item-object-category menu-item-273 depth"><a href="https://www.mackeyshotrods.com/store/?cat=28">Meet the crew</a>
        </li>
    </ul>
</li>
var windowResize = function () {
  if ($(window).width() < 830) { // your width
  $(".AboutLink").attr("href", "javascript:void(0)");
  }
};
$(document).ready(windowResize);
$(window).resize(windowResize);

示例集2

不要创建任何类或直接使用以下jquery的东西（但要避免这样做，因为它也会影响.about父div中的其他<a>标签）

var windowResize = function () {
  if ($(window).width() < 830) { // your width
  $(".about a").attr("href", "javascript:void(0)");
  }
};
$(document).ready(windowResize);
$(window).resize(windowResize);

解释

在第一种情况下，您直接选择要更改src的元素，因此只有该元素会通过jquery更改而受到影响，而在第二种情况中，您通过.about选择父div，然后通过'.about a选择其子div，现在这也选择了其他标记，并在那里应用jquery effcets。

现在我想你可以理解，如果我这样做（混合两件事）

<li id="menu-item-277" class="about menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-277 depth">
    <a class="AboutLink" href="https://www.mackeyshotrods.com/store/?cat=1">About</a>
    <ul class="sub-menu">
        <li id="menu-item-274" class="what_we_do menu-item menu-item-type-taxonomy menu-item-object-category menu-item-274 depth"><a href="https://www.mackeyshotrods.com/store/?cat=29">What We Do</a>
        </li>
        <li id="menu-item-273" class="meet_the_crew menu-item menu-item-type-taxonomy menu-item-object-category menu-item-273 depth"><a href="https://www.mackeyshotrods.com/store/?cat=28">Meet the crew</a>
        </li>
    </ul>
</li>

jquery

var windowResize = function () {
  if ($(window).width() < 830) { // your width
  $(".about .AboutLink").attr("href", "javascript:void(0)");
  }
};
$(document).ready(windowResize);
$(window).resize(windowResize);



最终编辑

只需添加使用此脚本（它在li . about中选择first <a>）

var windowResize = function () {
  if ($(window).width() < 830) { // your width
  $("li.about a:first").attr("href", "javascript:void(0)");
  }
};
$(document).ready(windowResize);
$(window).resize(windowResize);



用于启用href返回窗口调整为宽度>830px的

var windowResize = function () {
  if ($(window).width() < 830) { // your width
  $("li.about a:first").attr("href", "javascript:void(0)");
  }
  else {
  $("li.about a:first").attr("href", "https://www.mackeyshotrods.com/store/?cat=1");
  }
};



现在这应该会对你有所帮助。

演示

现在，这应该满足您的所有要求，使用.preventDefault()将防止链接在窗口宽度<830像素。只需使用以下脚本。

var windowResize = function () {
    $('li.about a').click(function (e) {
        if ($(window).width() < 830) {
            e.preventDefault();
        }
    })
};
$(document).ready(windowResize);
$(window).resize(windowResize);

$(function(){
    if ($(window).width() < 830) { // assuming you mean width
        $('#ABOUT').removeAttr('href');
    }
});

$(window).resize(function() {
      // This will execute whenever the window is resized
     if($(window).width()< 830 )
         $('#about').removeAttr('href');
});
相关文章：