台灣最大程式設計社群網站
線上人數
1016
 
會員總數:246691
討論主題:190104
歡迎您免費加入會員
討論區列表 >> Java Script/ Node.js >> jquery 顯示/隱藏 div
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
jquery 顯示/隱藏 div
價值 : 100 QP  點閱數:1683 回應數:6
樓主

JasonChu
初學者
11 53
1047 131
發送站內信

請問各位先進
這可以簡化嗎 ???
我發現越多 div
就越多 .hide
受不了...........

$('#sub1').mouseover(function() {
$('.sub1-1').slideToggle("fast");
$('.sub2-1').hide();
$('.sub3-1').hide();
$('.sub4-1').hide();
$('.sub5-1').hide();
$('.sub6-1').hide();
$('.sub7-1').hide();
$('.sub8-1').hide();
$('.sub9-1').hide();
$('.sub10-1').hide();
$('.sub11-1').hide();
});
$('#sub2').mouseover(function() {
$('.sub1-1').hide();
$('.sub2-1').slideToggle("fast");
$('.sub3-1').hide();
$('.sub4-1').hide();
$('.sub5-1').hide();
$('.sub6-1').hide();
$('.sub7-1').hide();
$('.sub8-1').hide();
$('.sub9-1').hide();
$('.sub10-1').hide();
$('.sub11-1').hide();
});
$('#sub3').mouseover(function() {
$('.sub1-1').hide();
$('.sub2-1').hide();
$('.sub3-1').slideToggle("fast");
$('.sub4-1').hide();
$('.sub5-1').hide();
$('.sub6-1').hide();
$('.sub7-1').hide();
$('.sub8-1').hide();
$('.sub9-1').hide();
$('.sub10-1').hide();
$('.sub11-1').hide();
});

本篇文章發表於2013-12-23 11:19
1樓
回應

凱爾
捐贈 VP 給 凱爾 檢舉此回應
本身變數命名就不太好,class看起來用法跟ID一樣,
class可以指定到多個div,如果真要改的話可以參考我修改得版本:
JSFiddle

---
延伸閱讀
http://stackoverflow.com/questions/6967081/show-hide-multiple-divs-with-jquery
本篇文章回覆於2013-12-23 13:18
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
作者回應

JasonChu
檢舉此回應
凱爾 兄

剛剛測試結果可以,萬分感謝,
另外因為使用 mouse over

當使用者滑鼠離開這些 div 時,最後一次展開的 div 內容還是顯示狀態,

可以在最外面在包一層 div 當滑鼠離開這一最外層的 div 時,這幾個 div 都會變成 hide。

可以這樣嗎 ??

謝謝。
本篇文章回覆於2013-12-23 13:49
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
最有價值解答

凱爾
捐贈 VP 給 凱爾 檢舉此回應
你是指這樣的效果嗎??

http://jsfiddle.net/kyleshen/pmDz9/1/
本篇文章回覆於2013-12-23 13:58
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
作者回應

JasonChu
檢舉此回應
被你猜中了 XDD

謝謝先進。
本篇文章回覆於2013-12-23 14:39
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
5樓
作者回應

JasonChu
檢舉此回應
等.....

可是用 mouseout

我就無法點擊 div 顯示後裡面的內容了了捏
本篇文章回覆於2013-12-23 14:41
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
6樓
作者回應

JasonChu
檢舉此回應
http://jsfiddle.net/jasonchu9/awt4v/3/


這樣可以 ???
本篇文章回覆於2013-12-23 14:52
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.