【jQuery】listDropDownリストドロップダウン

スマホ系でも動くようになっています。

by tea4two

HTML

<div class="listSelectSect">
<p class="listSelected"><strong>LIST</strong></p>
<ul class="listSelect">
<li class="selected"><a href="#">LIST ITEM1</a></li>
<li><a href="#">LIST ITEM2</a></li>
<li><a href="#">LIST ITEM3</a></li>
<li><a href="#">LIST ITEM4</a></li>
<li><a href="#">LIST ITEM5</a></li>
</ul>
</div>

CSS

.listSelectSect {
	padding: 15px 0;
	border-bottom: 10px;
	position: relative;
}
.listSelectSect .listSelected {
	margin: 0 20px;
	position: relative;
	z-index: 3;
	border: 1px solid #ccc;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background: #ccc;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#xxxxxx), color-stop(100%,#xxxxxx));
	text-shadow: 1px 1px 1px rgba(0,0,0,.5);
	color:#fff;
}
.listSelected.focus{
	background: #f00;
}
.listSelectSect .listSelected strong {
	display: block;
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
}
.listSelectSect ul {
	display: none;
	width: auto;
	padding-top: 42px;
	position: absolute;
	top: 20px;
	left: 20px;
	right: 20px;
	background: #fff;
	border: 1px solid #ccc;
	z-index: 2;
}
.listSelectSect ul li a {
	display:block;
	padding: 10px;
}

JavaScript

$(document).on('click touchstart',function(){
    $('.listSelected').removeAttr('tabindex').removeClass('focus');
    $('.listSelect').slideUp('fast');
});
$('.listSelect a').on('click touchend',function(e){
    var text = $(this).text();
    $('.listSelected').removeAttr('tabindex').removeClass('focus').find('strong').text(text);
    e.preventDefault();
    e.stopPropagation();
});
$('.listSelected').on('click touchend',function(e){
    $(this).toggleClass('focus');
    $('.listSelect').slideToggle('fast');
    e.stopPropagation();
});

//old source
/*	
	$('.listSelect a').on('touchend',function(e){
		var text = $(this).text();
		$('.listSelected').removeClass('focus').find('strong').text(text);
		$('.listSelect').slideUp('fast');
		e.preventDefault();
		e.stopPropagation();
	});
	$('.listSelected').on('touchend',function(e){
		var attr = $(this).attr('tabindex');//i did this just because to attach focus event to non-input element.
		if(typeof attr == 'undefined' || attr == false){
			$(this).attr('tabindex','0');
		} else {
			$(this).removeAttr('tabindex');
		}
		$(this).toggleClass('focus').focus();
		$('.listSelect').slideToggle('fast');
		e.stopPropagation();
	}).on('blur',function(){
		//only works in PC and Android
		$(this).removeAttr('tabindex').removeClass('focus');
		$('.listSelect').slideUp('fast');
	});

*/