Re: [問題] 三層accordion問題

看板Ajax作者s25g5d4 (死城盜賊)時間14年前 (2012/05/11 22:21)推噓1(1推 0噓 0→)

留言1則, 1人參與討論串2/4 (看更多)

推 s25g5d4:http://jsfiddle.net/RmBxB/1/ 這是我的寫法 05/10 23:35 昨天母親大人叫我早點睡只好匆匆改完你的code就跑了沒有解釋我的想法首先先奉上剛剛改好的第二版 http://jsfiddle.net/RmBxB/3/ 剛看到你的html時其實我覺得有點亂實際上並不需要那麼多div 你可以全部都用div做巢狀結構這樣html看起來會很整齊、漂亮或是也可以用ul li讓html語意更強烈另外class是可以累加上去的總之我重新組織了你的html 簡化多餘的部分並且加入多個accordion支援相對來說css也要修改其中比較重要的是 #Nav ul.accordionPart{ width:197px; margin:0; background: #313132; color: #fdfdfd; text-decoration: none; text-shadow: 0px 1px 0px rgba(0,0,0, .35); display: inline-block; float:left; box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1); } 這裡的display:inline-block;以及float:left; 可以讓多個ul.accordionPart 往右橫向排列同時在 #Nav { width:394px; margin:0 auto; } 要給他正確的width 以及margin 這樣才能將其置中 #Nav .accordionPart li ul.content {/*隱藏所有子選單以及設定子選單之margin*/ margin: 6px 0; display:none; } 還有script裡的hover( addClass("menu_on"); [讓我省略一下 :)] 其實這個用css就能達成了只要在selector後面加上:hover 就能設定當滑鼠移過去時要顯示的樣式秉持著js能省的部分就省(效能關係) 所以就把hover改用css解決了 :) 同理.siblings().hide()透過display:none也能解決所以最後的script部分只剩下slideToggle部分節省不少其他css的變動應該參照我的註解就能了解了有問題歡迎提出來再來回到你原本的問題(以及原本的code) 第一個是第三層之content不會變綠色主要是你的selector並沒有選到第三層的div.content $('#Nav ul.accordionPart li div.menu').hover(function(){ ^^^^^^^^ 實際上你只有選到div.menu 所以div.content是不會有反應的第二個問題是hover第二層時上色左邊會留空而沒有填滿整條那是因為如上述你選擇的是div.menu 所以你選擇到的是第二層的<div class="menu">aa</div> 並且對他做上色實際上他是有填滿整條的但是因為他位於ul.accordionPart li div.content下這裡你的css寫了一條padding-left:10px; 所以造成他左邊留空了10px 其實不用在ul.accordionPart li div.content時就給他padding-left:10px 你可以在第二層的div.menu再給他padding-left:10px 同時上色這樣就會變整條綠色了 ※ 引述《aoika (ka)》之銘言： : 標題: [問題] 三層accordion問題 : 時間: Thu May 10 22:24:37 2012 : : 新手有點問題想發問 : : 目前做出了三層的accordion選單，都可以跑 : 可是在特效上似乎出現一些問題 : : 1.如何在滑過任何一層時，綠色長度固定都一樣? : (在這邊試過很多次，為了讓1.2.3層有前後之分做了padding， : 但是之後的menu_on都會縮短，無法每一層都同長) : : 2.如何在滑到第3層aaa時，仍有綠色特效? : : 以下是我的程式碼 : http://jsfiddle.net/PDSDG/3/ : : : 不知道是哪裡出錯了，好像是在menu_on那邊無法判斷 : 可以請大家幫我看一下嗎 : 謝謝大家 -- → asdfg0612:3.4樓是甚麼鬼梗 (￣ー￣；) 01/29 10:51 推 key0077:亻也曰弓長父 01/29 10:51