我正在构建一个响应迅速的站点。当浏览器小于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');
});