響應試網頁navbar 寬度調整

css jquery

mayyola 2018-08-04 01:59:30 ‧ 3497 瀏覽

分享至

各位大大好:

原本網頁就有預設下拉式選單，當時為了桌機的navbar版型好看li改圖檔，並改css語法的寬度(width)，所以變手機板的時候，寬度就會跑掉，本來是想在@media screen and (max-width:481px){}中再重新下width寬度(px)，但還是會跟上排網站地圖淺藍色欄的寬度會有些許差異，就會產生左右卷軸，所以改用https://www.w3schools.com/code/tryit.asp?filename=FTX2GK4FD9PL jquery方式讓選單的寬度等於視窗寬度，但是css已經下了width:300px !important,jquery好像就無法改寬度了..想請問有甚麼方法可以處理讓選單等於視窗的寬度，謝謝!

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-08-04 08:11:25 檢舉

先把你的html, css簡化成你的問題，再把code放上來吧～

mayyola iT邦研究生 1 級 ‧ 2018-08-05 22:01:29 檢舉

本來有解決問題，不過要怎麼隨時偵測視窗大小，讓ul li的寬度隨視窗大小改變(例如手機原本是拿直的，突然變橫的)，我現在只有寫載入的時候，ul li 等於視窗大小..

$(document).ready(function(){
var bg_width= $(window).width() -3;
$('.ul li').children().css('cssText', 'width:'+bg_width+'px !important;');
$('.ul li.open').children().css('cssText', 'width:'+bg_width+'px !important;');
}

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

跟著鄉民看熱鬧

iT邦高手 1 級 ‧ 2018-08-06 08:43:20

最佳解答

請參考…

$( window ).resize(function() {
     var bg_width= $(this).width() -3;
    $('.ul li').children().css('cssText', 'width:'+bg_width+'px !important;');
    $('.ul li.open').children().css('cssText', 'width:'+bg_width+'px !important;');
});

回應 3
分享
檢舉

mayyola iT邦研究生 1 級 ‧ 2018-08-06 12:58:58 檢舉

k大您好: 我想請問resize執行下面程式會一直累加嗎?，剛有試著加這個，但是好像會累加上一次?

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-08-06 13:11:42 檢舉

裡面的$(window)改成$(this)

mayyola iT邦研究生 1 級 ‧ 2018-08-06 20:28:02 檢舉

謝謝

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22202 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙