Question

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

在智能手机或平板电脑上查看网站时，我希望用户能够单击“关于”选项卡以显示子菜单链接。现在，当我单击“关于”选项卡时，它会打开但是然后将我带到ABOUT页面，因为我点击了该链接。

            $("#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);

<强> Explainition

在第一种情况下，你直接选择你想要改变src的元素，因此只有那个元素通过jquery改变才会生效，而在第二种情况下，你选择.about的父div，然后用'.about选择它的子。 '，现在这也选择其他标签并在那里应用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);

最终修改

只需添加使用此脚本（它会选择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);

用于启用href，窗口大小调整为＆gt;宽度为830像素

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()将阻止链接在窗口宽度上的默认行为＆lt; 830px。只需使用以下脚本。

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

Answer 2

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

Answer 3

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

浏览器窗口＆lt;时删除超链接830px但留下文字

3 个答案: