移动端网站开发总结2

这段时间一直在做移动端的网站，顺便写一点总结吧，随便写的，想到什么写什么，所有若有幸被各位所看到，可以无视哈。。。。

1.

$(document).bind("click",function(e){ 
        var target = $(e.target); 
        if(target.closest(".pop").length == 0){ 
             $(".pop").hide(); 
        } 
    }) 

这段代码，是在做右上角菜单时候用到的，  意思是除了“.pop”元素块之外的文档任何地方点击一下“.pop”隐藏掉、、、

target.closest(".pop").length == 0

这段代码可以说是这个小功能的中最难懂的一段代码，target  是目标对象，详细解释：

e.target的含义

$(function(){
    $("li:has(ul)").click(function(e){
        if(this==e.target){
            $(this).children().toggle();
            $(this).css("list-style-image",($(this).children().is(":hidden")?"url(plus.gif)":"url(minus.gif)"))
        }
        return false;    //避免不必要的事件混绕
    }).css("cursor","pointer").click();    //加载时触发点击事件
   
    //对于没有子项的菜单，统一设置
    $("li:not(:has(ul))").css({
        "cursor":"default",
        "list-style-image":"none"
    });
});

===========================

具体问题具体分析；当前目标
在event事件中代表点击对象；
loader事件：加载对象；
e只是参数，任意取值；对应即可；


e.target 是目标对象，e.event是目标所发生的事件。

 

2.文字溢出部分隐藏并添加省略号： overflow:hidden;white-space: nowrap;text-overflow: ellipsis;详见：http://www.dayday28.com/line-clamp

3.因为pc端好多css3的样式不支持，但是做移动端就能用得上，例如：奇数偶数项:nth-child(odd) 与 :nth-child(even)这一系列等

4.类似低一点的案例

 

<span class="search">我是按钮1</span><span><a class="clickme" href="#">我是按钮2</a></span>
<div class="div_d" style="display: none;">我是1那个弹出层</div>
<div class="div_e" style="display: none;">我是那个222222的2弹出层</div>
<script src="js/jquery.js"></script>
<script>
/**
* 点击按钮显示层，点击其他地方隐藏层
* @param {str} btnName
* @param {str} divName
*/
var tarClickTip = function(btnName, divName) {
$('.' + btnName).click(function(e) {
$('.' + divName).show();
});
$(document).on('click', function(e) {
var e = e ? e : window.event;
var tar = e.srcElement || e.target;
var tarClassName = $(tar).attr("class");
if (tarClassName != btnName && tarClassName != divName) {
$('.' + divName).hide();
}
});
};
$('.clickme').click(tarClickTip('clickme', 'div_e'));
tarClickTip('search', 'div_d');
</script>