最近很想做一個像美團上點擊分類或地址，后面的背景變黑，下拉菜單提亮的效果。如下圖

其實做個蒙版很容易拉，這是CSS的寫法。 .mban{position:fixed;z-index:16;top:0;left:0;width:100%;height:100%;background:#000;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;}

有一點需要注意，就是position:fixed，如果不加入這條，你會發現你的蒙版只是一個屏幕的大小，當你往下活動屏幕時就沒有蒙版了。所以就把蒙版固定了，這樣滑動屏幕的時候，蒙版還一直顯示在頁面上。

主要就再看點擊的時候顯示下拉菜單和蒙版。我是用jQuery控制的，主要就是先隱藏下拉菜單即設定其display為none,當點擊分類的時候，出現下拉菜單和蒙版，而當手點擊蒙版或者滑動的時候，下拉菜單和蒙版同時消失。

因為是手機webapp我使用了touchstart和touchmove，自我感覺touchstart在手機上觸發比click好，其實click是一樣的。一開始使用mousemove，發現手指在屏幕上移動是不會觸發mousemove，這個應該只適用于pc網頁

$(document).ready(function(){    $("#category").bind('touchstart', function(event){        if($("#show").css("display") == "none"){            $("#mban").addClass("mban");//添加蒙版樣式            $("#show").css("display","inline");//顯示下拉列表，我用ul寫的            $("#show").addClass("show");//下拉菜單的位置樣式等        }else{//當已經有下拉菜單時，點擊則菜單與蒙版消失，分別移除樣式并隱藏菜單            $("#mban").removeClass("mban");            $("#show").removeClass("show");            $("#show").css("display","none");        }    });    $("#mban").bind('touchstart', function(event){//點擊蒙版時，下拉菜單與蒙版消失，分別移除樣式并隱藏菜單        $("#mban").removeClass("mban");        $("#show").removeClass("show");        $("#show").css("display","none");    });    $("#mban").bind('touchmove', function(event){//在蒙版處滑動屏幕時，下拉菜單與蒙版消失，分別移除樣式并隱藏菜單        $("#mban").removeClass("mban");        $("#show").removeClass("show");        $("#show").css("display","none");    });});