檢視原始碼 JavaScript 9 0 $(function(){ // 幫 div.qa_title 加上 hover 及 click 事件 // 同時把兄弟元素 div.qa_content 隱藏起來 $('#qacontent ul.accordionpart

Size: px

Start display at page:

Download "檢視原始碼 JavaScript 9 0 $(function(){ // 幫 div.qa_title 加上 hover 及 click 事件 // 同時把兄弟元素 div.qa_content 隱藏起來 $('#qacontent ul.accordionpart"

圆晏麴
7 years ago
Views:

1 一般商務型或是需要有客服的網站都會提供簡易的問與答頁面, 會把一些常見的問題整理成一個清單後, 接著再針對問題來一一回答當顧客有使用上或是其它疑問時, 可以先自行透過問與答來找找看是否有符合自己問題的項目但請試著想像一下, 若每一項問題的回答都行的話, 當問題項目一多的時候, 這樣網頁就會變的很長很長... 如果能把回答暫時先隱藏起來, 當顧客點擊到該問題項目時才展開答案的話, 至少網頁應該就會變的比較乾淨一點因為問與答是一對一的項目型態, 因此筆者就直接用 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 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 {

.. 如果能把回答暫時先隱藏起來, 當顧客點擊到該問題項目時才展開答案的話, 至少網頁應該就會變的比較乾淨一點因為問與答是一對一的項目型態, 因此筆者就直接用 ul 及 li 來當做項目使用 : 檢視原始碼 HTML 9 <div

$檢視原始碼 JavaScript 9 0 $(function(){ // 幫 div.qa_title 加上 hover 及 click 事件 // 同時把兄弟元素 div.qa_content 隱藏起來 $('#qacontent ul.accordionpart li div.qa_title').hover(function(){ $(this).$

2 檢視原始碼 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();

siblings('div.qa_content').hide(); ); 最後我們就能預覽畫面及效果 : 這樣是不是效果會比落落長的清單好很多呢?

3 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 :: 說 : 這樣你可以自己用一個變數來記錄現在是按下全展開還是隱藏然後再依此變數來進行動作的控制

4 於 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 說 : 謝謝男丁格爾老師的分享 ^^

click(); return false; ); </script> <a href="#q0" class="abgne" rel="nofollow">0</a> uqmeng 於 0 0::0 說 : 添加上了這段代碼, 沒有

5 謝謝不過我修改 CSS 後, 發現這樣的設定, 滑鼠移開後就又恢復一般的樣式了... 請問是不是還少了什麼林拉拉於 ::0 說 : 男丁老師您好, 我現在是把.qa_title 的欄位裡面塞入了其他的 class... ( 因為東西有點多 ) 結果在 Chrome 裡面, 除了第一行文字之外的 DIV 標籤內容全部都會被 display: block; 出不請教這個問題應該要如何修改呢? SHAO WEI 於 ::0 說 : 感謝老師分享 ~ 有助於學習 mimi 於 :0: 說 : 南丁老師, 我在頁面加入範例, 是可以運作正常, 但在頁面中的其他位置裡 ( 不是範例裡 ), 我有設定連結, 連到外面的網站, 卻沒有動作, 請問要調整那裡, 才能讓連結運作謝謝! 男丁格爾於 ::0 說 : 你是用第幾個範例呢? 有可能是程式中有加入到像檢視原始碼 JavaScript $('a').click(function(){ ); return false; 類似的語法吧, 這也要看到你的網站才知道問題在那 XD

SHAO WEI 於 0 0 9 0::0 說 : 感謝老師分享 ~ 有助於學習 mimi 於 0 09 09 0:0: 說 : 南丁老師, 我在頁面加入範例, 是可以運作正常, 但在頁面中的其他位置裡 ( 不是範例裡 ), 我有設定連結, 連到外面的網

6 mimi 於 ::0 說 : 謝謝南丁老師, 已順利解決了 ^^.. ruran 於 :0: 說 : 老師請問你顯示程式碼的語法是什麼? 好漂亮 lee sam 於 :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( content/uploads/0/0/qa_group_.gif) norepeat; #qacontent h.qa_group_ {

$width: 00px; height: px; text indent: 9999px; #qacontent h.qa_group_ { background: url(http://avierpro.$

7 #qacontent ul.accordionpart li.qa_title_on { text decoration: underline; #qacontent ul.accordionpart li.qa_content { margin: px 0 0; background: url( 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(); ); 全部展開全部隱藏訂購相關問題是否有提供送貨到離島的服務? 因航運成本較高, 本站提供免運費服務的範圍只限台灣本島若送貨地點是在離島等地時, 目前暫不提供寄送服務退貨相關問題最多試用幾天內才能退貨呢? 依照消保法規定, 消費者均享有商品到貨七天猶豫期之權益但退回商品必須是全新狀態且完整包裝, 否則恕不接受退貨退貨時是否需要負擔運費?

$qa_title // 並幫其加上 hover 及 click 事件 // 同時把兄弟元素加上.qa_content 並隱藏起來 $('#qacontent ul').addclass('accordionpart').find('li div:nthchild()').addclass('qa_title').hover(function(){ $(this).$

8 最新文章熱門文章最新 Phaser 官方範例 load an image [CSS]text shadow 文字陰影開心農場瀏覽器 (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.

(,9) ma [CSS] 用 CSS 畫圖示愛心 [CSS] 用 CSS 畫圖示太極圖利用 Charles 來燒蘿蔔彩豆 (,) [jq] 用 jquery 做廣告左右水平廣告輪播 (9,0) cin yoy [CSS] 用 CSS 做效果影像左右移動突顯效果 [jq] 用 jquery 做選單水平雙

9 Click below to find more Mipaper at Mipaper at

目錄壹題目 1: 新增商品 ( 商品名稱為玉井芒果乾禮盒 )... 3 貳題目 2: 新增商品 ( 商品名稱為紅磚布丁精選禮盒 )... 5 參題目 3: 新增商品 ( 商品名稱為晶鑽 XO 醬禮盒 ).

目錄壹題目 1: 新增商品 ( 商品名稱為玉井芒果乾禮盒 )... 3 貳題目 2: 新增商品 ( 商品名稱為紅磚布丁精選禮盒 )... 5 參題目 3: 新增商品 ( 商品名稱為晶鑽 XO 醬禮盒 ). 行動電子商務管理師行動電子商務規劃師術科考試題解製作單位 :TMCA 台灣行動商務運籌管理協會證照評測試務中心 1 目錄壹題目 1: 新增商品 ( 商品名稱為玉井芒果乾禮盒 )... 3 貳題目 2: 新增商品 ( 商品名稱為紅磚布丁精選禮

檢 視 原 始 碼 JavaScript 9 0 $(function(){ // 幫 div.qa_title 加 上 hover 及 click 事 件 // 同 時 把 兄 弟 元 素 div.qa_content 隱 藏 起 來 $('#qacontent ul.accordionpart

檢視原始碼 JavaScript 9 0 $(function(){ // 幫 div.qa_title 加上 hover 及 click 事件 // 同時把兄弟元素 div.qa_content 隱藏起來 $('#qacontent ul.accordionpart