boostrap-3-mobile-menu
boostrap-3-mobile-menu

維護舊網站,往往出現許許多令人意外的驚喜,包括:選單,桌機版本正常,切換到手機版本卻怪怪的,只有第一層選單可以正常顯示,但第二層選單無法正常顯示。

jquery ajax error
jquery ajax error

用inspect功能可以查出jquery出現錯誤。那麼這時候,如何Debug呢?

文章目錄

選單的架構

首先要了解,手機版本選單是用什麼方式作出來的?

bootstrap

查出bootstrap的版本

檢查bootstrap版本
檢查bootstrap版本

jquery

查出jquery適用的版本

檢查jquery版本
檢查jquery版本

找example

用bootstrap的版本找到選單的example,當然如果你對bootstrap選單的熟悉度如家常便飯,就又另常別論了。

Bootstarp menu example
Bootstarp menu example

ref: https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=responsive-navbar-inverted-variation

比對架構

以bootstrap版本為主,檢查目前系統中jquery版本,可以發現版本不一樣。接著替換為正確的jquery版本。

手機版本正常了!

竟然發現,第二層選單正常了;但只有第一個正常。

天啊!這個選單到底之前誰作出來的,抽完煙留了一堆煙屁股,等待有人發現去收拾它。

那問題出在哪?最大可能性就是程式碼了~

檢查程式碼

檢查選單語法是否正常,更新錯誤語法。一切就正常了。

錯誤

<a href="#" style="font-family: Arial, Helvetica, sans-serif; font-weight: 600"><span id="HowTo">HowTo</span><span class="caret"></span></a>

正確

<a id="aLabel" data-toggle="dropdown" data-target="#" href="#" style="font-family: Arial, Helvetica, sans-serif; font-weight: 600"><span id="Label1">Intro</span><span class="caret"></span></a>

如何快速解決網站錯誤?

找出網站問題很容易,但解決卻是不一定那麼容易。在資安也來擾局的情況下,而且現在的前端,是越來越複雜,顯示出的錯誤,並不一定就是那一行出問題。一個小錯誤,往往要花很多天的試錯才能解決。

 

前一篇文章解決SQL Server T-SQL如何正常儲存含腔調的字元 ü or finančné
下一篇文章SQL Server遇到要移除資料表中的欄位,卻發生錯誤
學經歷 淡江大學資訊管理研究所 諸銘科技軟體發開部經理與教育事業部總監 專長 網路創業、網路行銷、創業貸款、個資保護、資訊安全、程式設計(ASP.NET VB.NET MVC C# Core 6) 資安與個資證照:CompTia Security+ , ISO 27701。 演講與課程經歷 工研院講師 勞動部微型創業鳳凰貸款顧問 台北市社會局 衛福部中央健保署 新北市政府勞工局 管科會 中國生產力中心 中衛中心 中山管理教育基金會 中華軟協 南科產協 青創會 青創會內訓 臺北青年職涯發展中心 經濟部樂活創業人才班 中小企業總會 外貿協會 高雄醫學大學 雲林科技大學 台北醫學大學 銘傳大學 明新科大 中台科大 台灣科技大學 師範大學 大葉大學 台北城市大學 聖約翰科技大學 萬能科技大學 輔英科大 明新科大 美和科大 嘉南藥理大學 東南科大 亞太創意技術學院 格致商工 霧峰農工 三重商工 新店戒護所 台南就業處 台灣知識庫 台北景福扶輪社 富邦人壽 台北國際書展

回覆留言

Please enter your comment!
Please enter your name here