iT邦幫忙

2

響應試網頁navbar 寬度調整

各位大大好:
https://ithelp.ithome.com.tw/upload/images/20180804/20097057icz7TwaH57.png
原本網頁就有預設下拉式選單,當時為了桌機的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好像就無法改寬度了..想請問有甚麼方法可以處理讓選單等於視窗的寬度,謝謝!

先把你的html, css簡化成你的問題,再把code放上來吧~
mayyola iT邦新手 2 級 ‧ 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;');
}

1 個回答

0
最佳解答

請參考…

$( 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;');
});
mayyola iT邦新手 2 級 ‧ 2018-08-06 12:58:58 檢舉

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

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

mayyola iT邦新手 2 級 ‧ 2018-08-06 20:28:02 檢舉

謝謝

我要發表回答

立即登入回答