我想根据屏幕宽度更改一些jQuery。当页面加载时,我希望脚本确定窗口宽度var = width
,并根据该宽度选择一组函数。但是,如果用户要调整屏幕大小,我希望脚本重新定义width
并再次选择哪一组功能。
$(document).ready(function () {
var width = $( window ).width();
// Should I use this commented-out function below somehow???
// $(window).resize(function() {
// width = $( window ).width();
// });
// Navbar functionality
// for large screens
if ( width > 767 ) {
$(".navbar-link").on("click", function() {
var el = $(this);
var dd = el.siblings();
var loc = el.offset();
var left = loc.left;
var width = el.width();
var center = left + (0.5 * width);
var corrected_center = center - 5;
var isDown = dd.hasClass('down');
var numDown = $(document).find(".down").length;
// if there ARE dropdowns present, quickly hide / show
if ( numDown > 0 ) {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").hide();
}
// display the clicked link
if (!isDown) {
dd.addClass('down');
dd.show();
}
// if there are NO dropdowns present, animate w/ slide
} else {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").hide();
}
if (!isDown) {
dd.addClass('down');
dd.slideDown();
console.log($(".rest").css("top"));
$(".rest").animate({"top": "105px"});
}
}
var isActive = el.hasClass('activate');
$(".navbar-link").removeClass('activate');
$(".arrow-up").css("left", corrected_center);
if (isActive) {
$('.arrow-up').hide(400);
} else {
$('.arrow-up').show();
el.addClass('activate');
}
});
// For small screens
} else {
$(".navbar-link").on("click", function() {
var el = $(this);
var dd = el.siblings();
var isDown = dd.hasClass('down');
var numDown = $(document).find(".down").length;
$(".dropdown-nav").removeClass('down');
// if there ARE dropdowns present, quickly hide / show
if ( numDown > 0 ) {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").slideUp();
}
// display the clicked link
if (!isDown) {
dd.addClass('down');
dd.slideDown();
}
// if there are NO dropdowns present, animate w/ slide
} else {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").hide();
}
if (!isDown) {
dd.addClass('down');
dd.slideDown();
}
}
});
}
});
答案 0 :(得分:0)
我发现解决这个问题的最简单方法是在点击事件之后获得屏幕宽度。点击 - >得到宽度 - >如果屏幕> 767做{},否则做{}。这可以在下面看到。
$(document).ready(function () {
$(".navbar-link").on("click", function() {
var el = $(this);
var dd = el.siblings();
var loc = el.offset();
var left = loc.left;
var width = el.width();
var center = left + (0.5 * width);
var corrected_center = center - 5;
var isDown = dd.hasClass('down');
var numDown = $(document).find(".down").length;
var screenWidth = $( window ).width();
// check width to determine how to proceed
if ( screenWidth > 767 ) {
// if there ARE dropdowns present, quickly hide / show
if ( numDown > 0 ) {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").hide();
}
// display the clicked link
if (!isDown) {
dd.addClass('down');
dd.show();
}
// if there are NO dropdowns present, animate w/ slide
} else {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").hide();
}
if (!isDown) {
dd.addClass('down');
dd.slideDown();
console.log($(".rest").css("top"));
$(".rest").animate({"top": "105px"});
}
}
var isActive = el.hasClass('activate');
$(".navbar-link").removeClass('activate');
$(".arrow-up").css("left", corrected_center);
if (isActive) {
$('.arrow-up').hide(400);
} else {
$('.arrow-up').show();
el.addClass('activate');
}
// for small screens
} else {
// if there ARE dropdowns present, quickly hide / show
if ( numDown > 0 ) {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").slideUp();
}
// display the clicked link
if (!isDown) {
dd.addClass('down');
dd.slideDown();
}
// if there are NO dropdowns present, animate w/ slide
} else {
$(".dropdown-nav").removeClass('down');
// if THIS dropdown is down, animate w/ slide
if (dd.css("display") === "block") {
$(".dropdown-nav").slideUp();
// if ANOTHER dropdown is down, switch quickly
} else {
$(".dropdown-nav").hide();
}
if (!isDown) {
dd.addClass('down');
dd.slideDown();
}
}
}
});
});