シンプルでファッショナブルなjsドロップダウン選択ボックスをカスタマイズする_javascriptスキル

コードをコピー コードは次のとおりです: 統計テスト .dropdiv{ 幅: 180px; 高さ: 24px; オーバーフロー: 非表示; フロート: 左; フォントサイズ: 13px; フォントファミリー: "微软雅黑"; 位置: 相対。 パディング: 0px 26px 0px 5px; ボーダー: 実線 1px #cecece; 背景: url(../images/droparrow.png) 186px 繰り返しなし; } .dropmiandiv{ margin-left: 40px; 幅: 213px; 背景: url(../images/dropdown.png)repeat-x; 高さ: 27px; } .chooseItems{ border: 実線 1px #cecece; } .chooseItems .chooseItem{ font-size: 13px; フォントファミリー: "微软雅黑"; パディング: 5px; border-bottom: 実線 1px #cecece; } .chooseItems .chooseItem:last-child{ border-bottom:none; } .chooseItems .chooseItem:hover{ 背景: #f2f2f2; } 独立注册译员 供应商译员 供应商 代理商 独立注册译员 供应商译员 供应商 代理商 $(".dropdiv").click(function(e){ $(".chooseItems").slideUp(300); e.stopPropagation(); var Quest = $ (this).parent(); var Questwidth = parseInt(quest.width())-2; var クエスト高さ = Quest.height(); parseInt(quest.css("margin-left")) parseInt(quest.css("padding-left")); var top = parseInt(quest.position().top) parseInt(questheight) var attrs = Quest.attr("quest"); var selectsd = $('.chooseItems[answer=' attrs ']'); var selectsdHeight = selectsd.height(); if((top selectsdHeight)>$(window).height()){ top = top - selectsdHeight - Questheight-7; if($(selectsd).is(":visible; ")){ $(selectsd).slideUp(300); }else{ $(selectsd).css({"left":left "px","top":top "px" ","width":questwidth "px"}).slideDown(300); } }); $(".chooseItem").click(function(e){ e.stopPropagation(); var divhtml = $(this); var displayMember,valueMember; displayMember = divhtml.attr("displayMember"); valueMember = divhtml.attr("valueMember"); var attrs =$(this).parent().attr("answer");親 = $("#" 属性); var olddisplayMember =parent.attr("displayMember"); (olddisplayMember !=displayMember){ parent.attr("displayMember",displayMember); parent.val(valueMember);変更(); } $(this).parent().slideUp(300); $(document).click(function(e){ var target = $(e.target); if(target.closest(".chooseItems").length == 0){ $(".chooseItems").slideUp(300); } }); レンダリング

シンプルでファッショナブルなjsドロップダウン選択ボックスをカスタマイズする_javascriptスキル

関連記事