Jquery模拟下拉框及兼容

来源:互联网 发布:单相四极电机绕组数据 编辑:程序博客网 时间:2024/05/16 14:08

通过Jquery模拟下拉框 兼容ie Firefox chrome

    <div class="label1">        <p><i>旅游产品名称</i><em></em></p>        <ul style="display: none">            <li>旅游产品名称</li>            <li>其他产品名称</li>            <li>没有产品名称</li>            <li>旅游产品名称</li>        </ul>    </div>    $('.label1 em').click(function () {        if($('.label1 ul').css('display') == 'none'){ //通过判断是否显示来模拟toggle            $('.label1 ul').stop(true,true).slideDown(400)            $(this).css("background-position",'-37px 0')            $(document).click(function(){    //点击其他地方隐藏下拉框                $(".label1").find("ul").hide()                $('.label1 em').css("background-position",'0')            })        }        else {            $('.label1 ul').stop(true, true).slideUp(250);            $(this).css("background-position", '0')        }    // 阻止冒泡事件        var e=arguments.callee.caller.arguments[0]||event; //火狐        e = window.event||e;            if(document.all){  //只有ie识别document.all            e.cancelBubble=true;    //IE        }else{            e.stopPropagation();    //chrome        }    //文字替换    $(".label1 ul li").click(function () {       $(this).parent().siblings('p').find('i').text($(this).text())       })

toggle方法在jq1.8+中已被废弃
注意阻止冒泡事件在各浏览器下的兼容

0 0
原创粉丝点击