javascript - 当浏览器窗口 < 830px 时删除超链接但保留文本

Question

我有一个正在构建的响应式网站。当浏览器小于 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

我不知道该怎么做。感谢您的帮助!

Answer 1

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

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

$(document).ready(windowResize);
$(window).resize(windowResize);

记住 jquery 使用 css 选择器

这就是你想要的

示例集 1

创建一个 class="AboutLink"在<a>如下属性并使用以下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 创建任何类或其他东西(但要避免这种情况，因为它也会影响 <a> 父级 .about 中的其他 div 标签)

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 选择其子元素'，现在这也选择其他标签并在那里应用 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>

j查询

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

$(document).ready(windowResize);
$(window).resize(windowResize);

最终编辑

只需添加使用此脚本(它选择 first <a> 中的 li . about )

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

$(document).ready(windowResize);
$(window).resize(windowResize);

用于在窗口调整大小到 > 830px 宽度时启用 href

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

现在这应该对您有所帮助。

Demo

现在这应该可以满足您的所有要求，使用 .preventDefault()将阻止链接在窗口宽度 < 830px 上的默认行为。只需使用以下脚本。

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

$(document).ready(windowResize);
$(window).resize(windowResize);