雲筆記專案 筆記列表彈出 分享移動刪除 子選單

筆記列表裡還有乙個按鈕可以彈出子選單，要求做到以下幾點：

（1）點選選中的筆記行的彈出按鈕後，彈出子選單，再次點選，子選單收回。

（2）選中其他筆記後，子選單消失。效果如下圖所示：

在點選按鈕後，彈出子選單，實際上是讓子選單內容顯示出來，而再次點選讓子選單收回，就是讓子選單內容隱藏，這裡就需要參考jquery的hide()，show()，toggle()方法。點選其他筆記後，子選單消失，需要用到document中繫結click事件，將所有子選單隱藏。

（1）先在chrome控制台測試彈出和收回筆記效果，最終需要找到對應子選單的內容，將其顯示出來。

（2）js指令碼中給當前點選的彈出按鈕繫結乙個單擊事件。

//

繫結彈出筆記子選單，刪除移動等
$("#pc_part_2").on("click",".alert_submenu",showsubmenu);

#pc_part_2為對應大div，為父元素，然後在這個div裡找到class名為alert_submenu的元素（其實為彈出按鈕）,給其繫結乙個單擊事件，只要點選就觸發showsubmenu方法，以下是具體實現。剛開始是想過濾出來沒有選中的筆記，將裡面的所有子選單隱藏，然後將當前選中的子選單再實現切換顯示和隱藏。在**中剛開始出現了沒有過濾的情況，造成衝突。

//

彈出子選單
function
showsubmenu());
//修改後方法，還是需要加上阻止事件傳播部分
//$(".note_menu").prev().not(".checked").next().hide(function());
return
false;//
阻止點選事件繼續傳播，返回false解決
}

後進行了修改，將所有沒有選中，也就是a元素class屬性不為checked的a全部過濾出，然後將它們的所有子元素，就是子選單部分，進行了隱藏。隱藏完成後再將選中的行對應的子選單進行了切換。

$(".note_menu").prev().not(".checked").next().hide(function

());

但是還存在乙個問題，就是如果點選子選單顯示出來後，沒有隱藏的情況下再去點選其他的筆記列表，子選單不會消失。這裡就需要在document範圍內繫結乙個單擊事件，只要點選了網頁的任何乙個部分，都會將所有的子選單隱藏。但是這樣會導致所有的子選單又顯示不出來了，因為當點選了按鈕後子選單本來要顯示的，在即將顯示的過程中，事件冒泡的方式傳到了最上層的document,並隨後執行了隱藏所有子選單的方法啊，導致子選單顯示不出來。

$(document).click(hidesubmenu);

//

點選網頁任何區域，就可以隱藏彈出的選單
function
hidesubmenu()

測試結果如下圖，第一次為我點選recycle筆記本時的毫秒數，然後點選了一下彈出按鈕，發現先執行了彈出子選單的方法，隨後過了4ms，執行了隱藏所有子選單的方法，如果除掉獲取時間的**執行時間，兩者之間時間差可能更短，因此在幾毫秒內將本來要彈出的子選單又隱藏了，肉眼根本沒有任何彈出子選單的感覺。因此為了解決這個問題，需要用到阻止事件繼續傳播的方法，就是為了阻止事件繼續冒泡。

阻止事件冒泡：

可以參考博文有兩種方式可以阻止事件冒泡，一種是直接在需要阻止的方法裡返回false，另外一種是使用event物件的stoppropagation()函式。這裡使用第一種，加上這段**後，就可以正常的彈出和隱藏子選單了。

彈出子選單需要學習如何阻止事件冒泡，以及jquery常用的show，hide和toggle方法。

雲筆記專案

今天在老師帶領下學習雲筆記專案的登陸檢查功能。之前員工資訊管理系統寫過類似的業務，這次是用html頁面代替jsp,雖然不知道根本原因是什麼，但我想無非是從效率上去考慮，html應該會比jsp解析速度更快。用jquery和ajax在頁面寫指令碼，感覺邏輯很清晰，就是很多方法記不住，需要查閱api，而且...

雲筆記專案 移動筆記後高亮顯示筆記本和筆記

雲筆記專案移動筆記後，也想模仿其他筆記的功能，高亮移動後的筆記本和筆記，並且移動後的筆記需要在新筆記本筆記的第一列。因為服務端這邊返回了包含筆記本id和筆記id的資訊，因此可以通過遍歷的方式，找到對應的筆記本和筆記，然後將其a元素的class屬性新增上checked即可完成高亮效果。業務需要分成兩部...

Django框架（小專案 網路雲筆記）

註冊介面 主頁設計規範 在index應用中寫 路由正則 檢視函式 模板位置說明 def index view request templates index index.html 主頁 登陸後 雲筆記設計規範 路由正則 檢視函式 模板位置 說明 note def list view request ...