Javascript 下拉菜单不工作
我有一个Javascript 下拉菜单不工作,javascript,html,css,drop-down-menu,Javascript,Html,Css,Drop Down Menu,我有一个div,它位于网格视图的模板中,需要在单击时显示,在页面中的任何位置单击时隐藏 问题在于,它必须由服务器控制,并且需要由一个ID来处理——因为它必须用于填充grid view函数的选项 这是通过类完成的,但我需要ID中的这个。(单击btn1和btn2。) 实时预览() CSS: $("*").click(function (e) { e.stopPropagation(); if ($(".dropdownlist-title").hasClass('active'))
div
,它位于网格视图的模板中,需要在单击时显示,在页面中的任何位置单击时隐藏
问题在于,它必须由服务器控制,并且需要由一个ID来处理——因为它必须用于填充grid view函数的选项
这是通过类完成的,但我需要ID中的这个。(单击btn1和btn2。)
实时预览()
CSS:
$("*").click(function (e) {
e.stopPropagation();
if ($(".dropdownlist-title").hasClass('active')) {
$(".dropdownlist-title").removeClass('active');
} else {
if ($(this).parents().hasClass('dropdownlist-title') || $(this).attr('class') == 'dropdownlist_title') {
$(".dropdownlist-title").addClass('active');
}
}
});
.dropdownlist-title {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
position: relative;
margin-right: 10px;
margin-top: 10px;
}
.innerboxlist {
min-width: 200px;
padding: 0 25px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #f0f0f0;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out;
-khtml-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
cursor: pointer;
position: relative;
z-index: 2;
float: left;
}
.dropdownlist-title .listbox {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius:50px;
border:3px solid #989797;
-webkit-transition: all 0.2s ease-in-out;
-khtml-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
cursor: pointer;
position: relative;
z-index: 2;
float: left;
}
.dropdownlist-title .listbox .listarrow {
;
background-position: 0 0;
background-repeat: no-repeat;
display: block;
width: 7px;
height: 4px;
float: left;
margin-top: 26px;
margin-right: 23px;
margin-left: 0px;
opacity: 0.5;
-webkit-transition: opacity 0.2s ease-in-out;
-khtml-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.dropdownlist-title .listbox .listtitle {
color: #444;
font-size: 22px;
line-height: 32px;
margin: 0;
padding: 15px 0 15px 20px;
border-left: 1px solid #f0f0f0;
list-style: none;
display: block;
float: left;
-webkit-transition: all 0.2s ease-in-out;
-khtml-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.dropdownlist-title .listbox:hover {
background: #f5f5f5;
}
.dropdownlist-title .listbox:hover .arrow {
opacity: 1;
}
.dropdownlist-title .listbox:hover .title {
border-left: 1px solid #e0e0e0;
}
.dropdownlist-title .listbox:active {
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
-khtml-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
-o-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}
.dropdownlist-title ul {
position: absolute;
margin-left:20px;
z-index:999;
top:44px;
width: 100%;
background: #fff;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
list-style: none;
margin: 0;
padding: 0;
display: none;
}
.dropdownlist-title ul li a {
display: block;
padding: 10px;
border-bottom: 1px solid #ccc;
color: #404040;
text-decoration: none;
}
.dropdownlist-title ul li a:hover {
background-color: #8ec63d;
color: #fff;
}
.dropdownlist-title.active .listbox {
background: #fff;
}
.dropdownlist-title.active .listbox .listarrow {
opacity: 1;
}
.dropdownlist-title.active ul {
display: block;
margin-left:-177px;
-webkit-border-radius: 0 0 3px 3px;
-khtml-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-o-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
.dropdownlist_img_small {
float: left;
margin-left: 11px;
margin-top: -10px;
}
它现在做什么?它不应该做什么?它不应该做什么?添加到jsfiddle.net以使调试更容易…下面是实时预览。它是由类完成的,但我需要它在动态生成ID上的工作。
.dropdownlist-title {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
position: relative;
margin-right: 10px;
margin-top: 10px;
}
.innerboxlist {
min-width: 200px;
padding: 0 25px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #f0f0f0;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transition: all 0.2s ease-in-out;
-khtml-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
cursor: pointer;
position: relative;
z-index: 2;
float: left;
}
.dropdownlist-title .listbox {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius:50px;
border:3px solid #989797;
-webkit-transition: all 0.2s ease-in-out;
-khtml-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
cursor: pointer;
position: relative;
z-index: 2;
float: left;
}
.dropdownlist-title .listbox .listarrow {
;
background-position: 0 0;
background-repeat: no-repeat;
display: block;
width: 7px;
height: 4px;
float: left;
margin-top: 26px;
margin-right: 23px;
margin-left: 0px;
opacity: 0.5;
-webkit-transition: opacity 0.2s ease-in-out;
-khtml-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.dropdownlist-title .listbox .listtitle {
color: #444;
font-size: 22px;
line-height: 32px;
margin: 0;
padding: 15px 0 15px 20px;
border-left: 1px solid #f0f0f0;
list-style: none;
display: block;
float: left;
-webkit-transition: all 0.2s ease-in-out;
-khtml-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.dropdownlist-title .listbox:hover {
background: #f5f5f5;
}
.dropdownlist-title .listbox:hover .arrow {
opacity: 1;
}
.dropdownlist-title .listbox:hover .title {
border-left: 1px solid #e0e0e0;
}
.dropdownlist-title .listbox:active {
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
-khtml-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
-o-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}
.dropdownlist-title ul {
position: absolute;
margin-left:20px;
z-index:999;
top:44px;
width: 100%;
background: #fff;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
list-style: none;
margin: 0;
padding: 0;
display: none;
}
.dropdownlist-title ul li a {
display: block;
padding: 10px;
border-bottom: 1px solid #ccc;
color: #404040;
text-decoration: none;
}
.dropdownlist-title ul li a:hover {
background-color: #8ec63d;
color: #fff;
}
.dropdownlist-title.active .listbox {
background: #fff;
}
.dropdownlist-title.active .listbox .listarrow {
opacity: 1;
}
.dropdownlist-title.active ul {
display: block;
margin-left:-177px;
-webkit-border-radius: 0 0 3px 3px;
-khtml-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-o-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
.dropdownlist_img_small {
float: left;
margin-left: 11px;
margin-top: -10px;
}