一 般 商 務 型 或 是 需 要 有 客 服 的 網 站 都 會 提 供 簡 易 的 問 與 答 頁 面, 會 把 一 些 常 見 的 問 題 整 理 成 一 個 清 單 後, 接 著 再 針 對 問 題 來 一 一 回 答 當 顧 客 有 使 用 上 或 是 其 它 疑 問 時, 可 以 先 自 行 透 過 問 與 答 來 找 找 看 是 否 有 符 合 自 己 問 題 的 項 目 但 請 試 著 想 像 一 下, 若 每 一 項 問 題 的 回 答 都 行 的 話, 當 問 題 項 目 一 多 的 時 候, 這 樣 網 頁 就 會 變 的 很 長 很 長... 如 果 能 把 回 答 暫 時 先 隱 藏 起 來, 當 顧 客 點 擊 到 該 問 題 項 目 時 才 展 開 答 案 的 話, 至 少 網 頁 應 該 就 會 變 的 比 較 乾 淨 一 點 因 為 問 與 答 是 一 對 一 的 項 目 型 態, 因 此 筆 者 就 直 接 用 ul 及 li 來 當 做 項 目 使 用 : 檢 視 原 始 碼 HTML 9 <div id="qacontent"> <h class="qa_group_"> 問 題 分 類 </h> <ul class="accordionpart"> <li> <div class="qa_title"> 問 題 </div> <div class="qa_content"> 答 案 </div> </li> </ul> </div> h 是 用 來 當 做 問 題 分 類 用 的, 等 等 也 會 用 CSS 來 把 它 加 上 背 景 圖 片 做 美 化 而 每 一 組 li 都 會 有 問 題 及 答 案 div, 且 各 自 有 不 同 的 classname 檢 視 原 始 碼 CSS 9 0 9 0 ul, li { margin: 0; padding: 0; list style: none; #qacontent { width: 00px; #qacontent h { width: 00px; height: px; text indent: 9999px; #qacontent h.qa_group_ { background: url(qa_group_.gif) no repeat; #qacontent h.qa_group_ { background: url(qa_group_.gif) no repeat; #qacontent ul.accordionpart { margin: 0px 0px 0px 0px; #qacontent ul.accordionpart li {
檢 視 原 始 碼 JavaScript 9 0 $(function(){ // 幫 div.qa_title 加 上 hover 及 click 事 件 // 同 時 把 兄 弟 元 素 div.qa_content 隱 藏 起 來 $('#qacontent ul.accordionpart li div.qa_title').hover(function(){ $(this).addclass('qa_title_on');, function(){ $(this).removeclass('qa_title_on'); ).click(function(){ // 當 點 到 標 題 時, 若 答 案 是 隱 藏 時 則 顯 示 它 ; 反 之 則 隱 藏 $(this).next('div.qa_content').slidetoggle(); ).siblings('div.qa_content').hide(); ); 最 後 我 們 就 能 預 覽 畫 面 及 效 果 : 這 樣 是 不 是 效 果 會 比 落 落 長 的 清 單 好 很 多 呢?! 不 過 若 是 清 單 一 多 時, 要 一 一 幫 問 題 及 答 案 加 上 classnam 就 變 成 是 麻 煩 的 事 ( 可 用 後 端 程 式 來 輸 出 ), 所 以 筆 者 這 邊 就 把 它 改 用 程 式 來 加 : 檢 視 原 始 碼 JavaScript 9 0 $(function(){ // 幫 #qacontent 的 ul 子 元 素 加 上.accordionPart // 接 著 再 找 出 li 中 的 第 一 個 div 子 元 素 加 上.qa_title // 並 幫 其 加 上 hover 及 click 事 件 // 同 時 把 兄 弟 元 素 加 上.qa_content 並 隱 藏 起 來 $('#qacontent ul').addclass('accordionpart').find('li div:nth child()').addclass('qa_title') $(this).addclass('qa_title_on');, function(){ $(this).removeclass('qa_title_on'); ).click(function(){ // 當 點 到 標 題 時, 若 答 案 是 隱 藏 時 則 顯 示 它, 同 時 隱 藏 其 它 已 經 展 開 的 項 目 // 反 之 則 隱 藏 var $qa_content = $(this).next('div.qa_content'); if(!$qa_content.is(':visible')){ $('#qacontent ul li div.qa_content:visible').slideup();
V 最 專 業 的 廚 具 及 系 統 櫃 銷 售 設 計 軟 體 欲 知 詳 情, 請 上 二 進 位 官 網 [ 標 籤 : Animation, CSS, Effects, JavaScript, jquery ] 9 筆 針 對 [JQ] 滑 出 式 問 與 答 (Q&A) 清 單 的 迴 響 «前 一 頁 Jay 於 0 0 ::0 說 : 男 丁 格 爾 老 師 請 問 要 如 何 消 除 ul li 會 出 現 退 格 的 問 題 呢? 男 丁 格 爾 於 0 0 0::0 說 : 什 麼 是 退 格? HYM 於 0 09 :0: 說 : 男 丁 格 爾 老 師, 請 問 範 例 的 " 全 部 展 開 " 和 " 全 部 隱 藏 " 如 何 改 成 用 一 個 按 鈕 就 可 以 全 部 展 開 和 隱 藏 呢? 謝 謝 您 的 指 導 ~ 男 丁 格 爾 於 0 :: 說 : 這 樣 你 可 以 自 己 用 一 個 變 數 來 記 錄 現 在 是 按 下 全 展 開 還 是 隱 藏 然 後 再 依 此 變 數 來 進 行 動 作 的 控 制
於 0 :0: 說 : 同 一 頁 的 話 要 針 對 你 點 擊 的 超 連 結 來 加 程 式 才 可 以, 例 如 檢 視 原 始 碼 JavaScript <script> $('.abgne').click(function(){ $(this.href).click(); return false; ); </script> <a href="#q0" class="abgne" rel="nofollow">0</a> uqmeng 於 0 0::0 說 : 添 加 上 了 這 段 代 碼, 沒 有 反 應! 如 果, 有 多 個 這 樣 的 同 一 頁 的 鏈 接, 是 不 是 要 給 每 個 鏈 接 添 加 個 單 獨 的 class? 男 丁 格 爾 於 0 0::0 說 : 改 一 下, 改 用 $(this.hash).click(); 不 用 每 個 都 給 不 同 的 class.. 同 一 個 就 好 uqmeng 於 0 :0:0 說 : 謝 謝 男 丁 格 爾 老 師!OK 了! 小 量 於 0 :0:09 說 : 謝 謝 男 丁 格 爾 老 師 的 分 享 ^^
謝 謝 不 過 我 修 改 CSS 後, 發 現 這 樣 的 設 定, 滑 鼠 移 開 後 就 又 恢 復 一 般 的 樣 式 了... 請 問 是 不 是 還 少 了 什 麼 林 拉 拉 於 0 0 0 00::0 說 : 男 丁 老 師 您 好, 我 現 在 是 把.qa_title 的 欄 位 裡 面 塞 入 了 其 他 的 class... ( 因 為 東 西 有 點 多 ) 結 果 在 Chrome 裡 面, 除 了 第 一 行 文 字 之 外 的 DIV 標 籤 內 容 全 部 都 會 被 display: block; 出 不 來 @@" 請 教 這 個 問 題 應 該 要 如 何 修 改 呢? SHAO WEI 於 0 0 9 0::0 說 : 感 謝 老 師 分 享 ~ 有 助 於 學 習 mimi 於 0 09 09 0:0: 說 : 南 丁 老 師, 我 在 頁 面 加 入 範 例, 是 可 以 運 作 正 常, 但 在 頁 面 中 的 其 他 位 置 裡 ( 不 是 範 例 裡 ), 我 有 設 定 連 結, 連 到 外 面 的 網 站, 卻 沒 有 動 作, 請 問 要 調 整 那 裡, 才 能 讓 連 結 運 作 謝 謝! 男 丁 格 爾 於 0 09 09 ::0 說 : 你 是 用 第 幾 個 範 例 呢? 有 可 能 是 程 式 中 有 加 入 到 像 檢 視 原 始 碼 JavaScript $('a').click(function(){ ); return false; 類 似 的 語 法 吧, 這 也 要 看 到 你 的 網 站 才 知 道 問 題 在 那 XD
mimi 於 0 09 0 ::0 說 : 謝 謝 南 丁 老 師, 已 順 利 解 決 了 ^^.. ruran 於 0 0 0 :0: 說 : 老 師 請 問 你 顯 示 程 式 碼 的 語 法 是 什 麼? 好 漂 亮 lee sam 於 0 0 0 :0: 說 : 請 教 老 師, 我 以 下 述 的 語 法 結 果 上 面 會 有 一 大 空 格, 請 問 應 該 如 何 修 正? ~~~~~~~~~~~~~~~~~~~~~~~ 問 與 答 Q&A ul, li { margin: 0; padding: 0; list style: none; #qacontent { width: 00px; #qacontent h { width: 00px; height: px; text indent: 9999px; #qacontent h.qa_group_ { background: url(http://avierpro.com/wp content/uploads/0/0/qa_group_.gif) norepeat; #qacontent h.qa_group_ {
#qacontent ul.accordionpart li.qa_title_on { text decoration: underline; #qacontent ul.accordionpart li.qa_content { margin: px 0 0; background: url(http://avierpro.com/wp content/uploads/0/0/icon_q_a.gif) no repeat 0px px; padding left: px; color: #; $(function(){ // 幫 #qacontent 的 ul 子 元 素 加 上.accordionPart // 接 著 再 找 出 li 中 的 第 一 個 div 子 元 素 加 上.qa_title // 並 幫 其 加 上 hover 及 click 事 件 // 同 時 把 兄 弟 元 素 加 上.qa_content 並 隱 藏 起 來 $('#qacontent ul').addclass('accordionpart').find('li div:nthchild()').addclass('qa_title').hover(function(){ $(this).addclass('qa_title_on');, function(){ $(this).removeclass('qa_title_on'); ).click(function(){ // 當 點 到 標 題 時, 若 答 案 是 隱 藏 時 則 顯 示 它, 同 時 隱 藏 其 它 已 經 展 開 的 項 目 // 反 之 則 隱 藏 var $qa_content = $(this).next('div.qa_content'); if(!$qa_content.is(':visible')){ $('#qacontent ul li div.qa_content:visible').slideup(); $qa_content.slidetoggle(); ).siblings().addclass('qa_content').hide(); ); 全 部 展 開 全 部 隱 藏 訂 購 相 關 問 題 是 否 有 提 供 送 貨 到 離 島 的 服 務? 因 航 運 成 本 較 高, 本 站 提 供 免 運 費 服 務 的 範 圍 只 限 台 灣 本 島 若 送 貨 地 點 是 在 離 島 等 地 時, 目 前 暫 不 提 供 寄 送 服 務 退 貨 相 關 問 題 最 多 試 用 幾 天 內 才 能 退 貨 呢? 依 照 消 保 法 規 定, 消 費 者 均 享 有 商 品 到 貨 七 天 猶 豫 期 之 權 益 但 退 回 商 品 必 須 是 全 新 狀 態 且 完 整 包 裝, 否 則 恕 不 接 受 退 貨 退 貨 時 是 否 需 要 負 擔 運 費?
最 新 文 章 熱 門 文 章 最 新 Phaser 官 方 範 例 load an image [CSS]text shadow 文 字 陰 影 開 心 農 場 瀏 覽 器 0..0. (99,) [jq] 利 用 jquery 來 製 作 網 頁 頁 籤 (Tab) (9,) るか wa [CSS] 用 CSS 做 載 入 動 畫 仿 Flickr 載 入 動 畫 開 心 水 族 箱 瀏 覽 器 0. (,9) ma [CSS] 用 CSS 畫 圖 示 愛 心 [CSS] 用 CSS 畫 圖 示 太 極 圖 利 用 Charles 來 燒 蘿 蔔 彩 豆 (,) [jq] 用 jquery 做 廣 告 左 右 水 平 廣 告 輪 播 (9,0) cin yoy [CSS] 用 CSS 做 效 果 影 像 左 右 移 動 突 顯 效 果 [jq] 用 jquery 做 選 單 水 平 雙 層 子 選 單 (90,) cin [CSS] 用 CSS 做 表 單 自 訂 單 / 多 選 框 樣 式 ( 二 ) [jq] 用 jquery 做 廣 告 淡 入 淡 出 式 的 切 換 影 像 (,) 家 文 [CSS]box shadow 區 塊 陰 影 [jq] 用 jquery 控 制 網 頁 捲 軸 移 動 (,) bak [CSS] 用 CSS 做 效 果 影 像 縮 放 位 移 突 顯 效 果 [jq] 用 jquery 做 跑 馬 燈 仿 Yahoo 滾 動 式 訊 息 跑 馬 燈 cro( [CSS] 用 CSS 畫 圖 示 雲 朵 [jq] 用 jquery 做 選 單 彩 色 動 態 伸 縮 子 選 單 (,9) Fra CopyRight 00 0 男 丁 格 爾 's 脫 殼 玩 All Rights Reserved.
Click below to find more Mipaper at www.lcis.com.tw Mipaper at www.lcis.com.tw