从li元素下拉

Question

我尝试从三个li元素制作下拉菜单。活动li元素获取类current_lang，它应该作为父级工作，可以单击以打开下拉列表。下拉菜单也适用于移动设备。

任何想法/帮助如何从这种ul列表中下拉？

<ul class="language_switch">
<li><a href="#">de</a></li>
<li class="current_lang"><a href="#">en</a></li>
<li><a href="#">ch</a></li>
</ul>

这是jsfiddle

Answer 1

以下是selectbox dropdown <ul> & <li>使用 $(document).ready(function() { $('.selectbox').on('click', function(){ var select = $('.select'); select.toggleClass('active'); $('.options li span').on('click', function(){ var pk = $(this).closest('li').find('i').first().text(); $(this).closest('.options').find('span').show(); // - $(this).closest('.options').find('span').removeClass('active'); $(this).hide(); // - $(this).addClass('active'); $('.selected').text($(this).html()); select.toggleClass('hidden'); $('.header').find('input[name=category]').val(pk); }) }); })元素和功能。

.selectbox {
	position:relative; 
	height: auto; 
	width: 270px; 
	font-weight: bold;
	}
.select {
	position:relative;
	z-index:1;
	padding:0 5px;
	border:4px solid black;
	background: grey;
	border-radius:13px;
	}
.select.active {
	padding:0 5px 5px;
	z-index:2;
	background: grey;
	border: 4px solid black;
	box-shadow:0 0 13px orange;
	}
.select.hidden {
	display:block;
}
.select div {display:none;}
.select.active div {display:block;}
.select .header {
	position:relative;
	display:block;
	cursor:pointer;
	padding:5px 0;
	}
.select .selected {
	line-height:25px;
	display:block;
	color: white;
	}
.select i {
	position: absolute;
	right:0;
	top:11px;
	width:14px;
	height:6px;
	}
.select.active i {background-position:0 -18px;}
.select .options {max-height:200px; overflow:auto;}
.options i {display:none;}
.select ul {list-style-type:none;}
.select ul li {
	position:relative;
	display:block;
	width:100%;
	margin-top:2px;
	}
.select ul li span {
	display:inline-block;
	line-height:1;
	color:#5d5d5d;
	cursor:pointer;
	position:relative;
	color:white;
	}
.select ul li span:hover, .select ul li span.active {color:orange;left:3px;}
.select ul li span.active {font-weight:bold;}
.select li ul {margin-left:10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectbox">
    <div class="select">
        <div class="header">
            <div class="selected">Select</div>
            <i></i>
        <input type="hidden" value="" name="category">
        </div>
        <div class="options">
             <ul>
                <li><i>1</i><span>OPTION 1</span></li>
                <li><i>2</i><span>OPTION 2</span></li>
                <li><i>3</i><span>OPTION 3</span></li>
                <li><i>4</i><span>OPTION 4</span></li>
				<li><i>5</i><span>OPTION 5</span></li>
            </ul>
        </div>
    </div>
</div>

123;Código Postal *;HH;456
523;Código Postal *;HI;459
723;Código Postal *;HM;450