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

如下所示在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效果。

现在我想您可以理解我是否这样做(两者混合)

<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重新启用后窗口大小调整为> 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");
  }
};





现在,这应该可以为您提供帮助。

Demo

现在,这应该可以满足您的所有要求,使用.preventDefault()可以防止窗口宽度
var windowResize = function () {
    $('li.about a').click(function (e) {
        if ($(window).width() < 830) {
            e.preventDefault();
        }
    })
};

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

07-24 09:50
查看更多