Bootstrap 4裡的Navbar與Collapse結合應用

又要來麻煩各位大大了(鞠躬)~

目前利用Bootstrap 4裡面的Navbar功能設計了一個選單,有下拉介面的。假設首頁Navbar有如下圖的Dropdown link 連結,下一層又有Action、Another action、Something else here三個連結。

Bootstrap 4裡的Navbar與Collapse結合應用

然後在Dropdown link這個網頁裡面用了Bootstrap 4的Collapse套件,並將上面三個連結設成展開後就能看到裡面內容。

Bootstrap 4裡的Navbar與Collapse結合應用

Bootstrap 4的Collapse

現在的疑問是,是否可變更成點了首頁Navbar的Action、Another action、Something else here三個任一連結,就直接到Dropdown link網頁並直接展開其對應的連結內容而不用再點開呢?

不知道是否有大大有做過類似的效果?再麻煩指教了,謝謝。
2019-10-03 14:10 發佈
以前我學Frontpage和Dreamweaver時,有一個「書籤」功能:只要在這三個panel的標題插入書籤,上面那個下拉式清單就能直接連結
不過現在一堆人都不推薦這兩套軟體,所以得動用到javascript自己寫了
艾莉安 wrote:
以前我學Frontpage...(恕刪)


Frontpage應該是沒人在用了,但是Dreamweaver有些功能我覺得還是蠻好用的
ayulerah wrote:
又要來麻煩各位大大了...(恕刪)


你既然要跨網頁那勢必需要GET請求
ayulerah wrote:
又要來麻煩各位大大了...(恕刪)


先假設你的dropdown links 是同一頁,
你可以用 js 來達成

若是跨頁, 則需要你在換頁的時候, 在網址後面加上一些參數比如
?section=blablabla

然後該頁面的js在載入頁面的時候看見這參數的時候(或者同一頁 js 函式呼叫)會自動進行一些動作比如你要的
1. 自動到你要的區塊
2. 展開區塊的內容

參考資料:
1. smooth scroll
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_smooth_scroll_jquery
2. js 取得 query 參數 (跨頁)
https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
3. js 控制展開/收縮區塊
https://getbootstrap.com/docs/4.0/components/collapse/#via-javascript
lordzpipo wrote:
先假設你的dropdown...(恕刪)


先謝謝前輩的回覆,抱歉今天才看到回文~我再來研究看看

大感謝~
內文搜尋
X
評分
評分
複製連結
Mobile01提醒您
您目前瀏覽的是行動版網頁
是否切換到電腦版網頁呢?