自定义下拉列表不起作用
Custom dropdown list not working
我正在尝试创建一个自定义下拉列表。我想有两个选项在我的下拉列表即预定义和自定义。当我从列表中选择自定义时,它没有被选中。我有这个代码到目前为止没有工作。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
event.stopPropagation();
});
}
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-5').removeClass('active');
});
});
</script>
<style>
.wrapper-dropdown-5 {
/* Size & position */
position: relative;
width: 144px;
margin: 0 auto;
padding: 12px 15px;
/* Styles */
background: #fff;
cursor: pointer;
outline: none;
transition: all 0.3s ease-out;
}
.wrapper-dropdown-5:after { /* Little arrow */
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 165px;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #067ab4 transparent;
}
.wrapper-dropdown-5 .dropdown {
/* Size & position */
position: absolute;
top: 30%;
left: -40;
right: 0;
/* Styles */
list-style: none;
transition: all 0.3s ease-out;
/* Hiding */
max-height: 0;
overflow: hidden;
}
.wrapper-dropdown-5 .dropdown li {
padding: 0 10px ;
}
.wrapper-dropdown-5 .dropdown li a {
display: block;
text-decoration: none;
color: #067ab4;
transition: all 0.3s ease-out;
}
.wrapper-dropdown-5 .dropdown li:last-of-type a {
border: none;
}
.wrapper-dropdown-5 .dropdown li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;
}
/* Hover state */
.wrapper-dropdown-5 .dropdown li:hover a {
color: #57a9d9;
}
/* Active state */
.wrapper-dropdown-5.active {
border-radius: 5px 5px 0 0;
box-shadow: none;
border-bottom: none;
color: white;
}
.wrapper-dropdown-5.active:after {
border-color: #067ab4 transparent;
}
.wrapper-dropdown-5.active .dropdown {
border-bottom: 0px solid rgba(0,0,0,0.2);
max-height: 400px;
}
div#dd
{
color: #067ab4;
font: 30px tahoma;
display: inline-block;
}
div#textA
{
display: inline-block;
font: 30px tahoma;
padding-left: 20px;
}
div#textB
{
display: inline-block;
font: 30px tahoma;
padding-left: 6px;
}
</style>
</head>
<body> <div id="textA">I want to select a</div>
<div id="dd" class="wrapper-dropdown-5" tabindex="1">Predefined
<ul class="dropdown">
<li><a href="#"><i class="icon-user"></i>Custom</a></li>
</ul>
</div>
<div id="textB">profile</div>
</body>
<html>
您必须将事件侦听器附加到nav项以使其工作,否则您编写了所有这些javascript并且没有调用它来工作。
事件侦听器这是你想要的吗?我只是用jquery来交换文本点击事件,需要一些调整,我认为你的css虽然让它交换回来。
小提琴在这里:http://jsfiddle.net/R5aHa/
$('#dd2').click(function(){
var selected = $('#dd2').text();
if($('#dd2').text(selected)){
$('#dd2').html("Predefined");
$('#dd').html("Custom");
} else {
$('#dd').html("Predefined");
$('#dd2').html("Custom");
}
});
相关文章:
- 剑道UI下拉列表在剑道窗口内不起作用
- 单击辐射网格过滤器时不会打开下拉列表
- 显示基于第一个下拉列表的第二个下拉列表不起作用
- 引导程序的下拉列表不起作用
- 选择2 allowClear不使用动态下拉列表
- 下拉列表的onChange()第二次不起作用
- 来自Jquery的“.on”方法在动态生成的下拉列表后不起作用
- 在JavaScript中更改下拉列表索引后,ASP.Net提交按钮单击事件不起作用
- 具体化下拉列表和侧边导航不起作用
- 当我从下拉列表中选择公司名称时,UpdatePanel 自动发布返回=true 并且自动完成文本框不起作用
- 下拉列表删除类不起作用
- 单击两次图标不会关闭下拉列表
- 使用 $('#id').val() 不会返回下拉列表的选定值
- 剑道数据源示意图.数据不能用于下拉列表
- 水豚Poltergeist在点击后不会切换下拉列表
- jQuery -点击链接时不能显示下拉列表
- 使字段不需要基于下拉列表选择MVC 5
- 不能刷新下拉列表在asp mvc 4与选择0.9.12
- 如何使用语言切换器的
- 列表而不是<选择>下拉列表
- 双击事件在IE浏览器中不起作用的选项列表