사용자가 상자의 색상을 선택할 수 ul li
있는 select
입력 과 같은 요소 기능을 만들고 있습니다.
코드는 다음과 같습니다.
$(document).ready(function() {
$('.color-picker ul.color-list li.active .text').after('<span class="pull-right glyphicon glyphicon-menu-down"></span>');
$('.color-picker ul.color-list li').click(function() {
if ($(this).hasClass('active')) {
console.log(2);
$('.color-picker ul.color-list li').show();
} else {
console.log(1);
var color = $(this).find('.box').css('backgroundColor');
$('.color-picker .color-box').css({
'background-color': color
});
$('.color-picker ul.color-list li.active').removeClass('active');
$('.color-picker ul.color-list li').hide();
$(this).addClass('active');
$('.color-picker ul.color-list li.active').show();
$('.color-picker ul.color-list li .glyphicon').remove();
$('.color-picker ul.color-list li.active .text').after('<span class="pull-right glyphicon glyphicon-menu-down"></span>');
}
});
});
.color-picker {
display: flex;
margin: 20px;
border: 1px solid #d9d9d9;
padding: 10px;
width: 350px;
}
.color-picker .color-box {
display: inline-block;
background-color: black;
height: 50px;
width: 50px;
}
.color-picker ul.color-list {
display: inline-block;
margin: 0;
position: absolute;
}
.color-picker ul.color-list li {
list-style: none;
border: 1px solid #d9d9d9;
padding: 10px;
cursor: pointer;
width: 200px;
background-color: white;
}
.color-picker ul.color-list li.active {
display: block;
}
.color-picker ul.color-list li {
display: none;
}
.color-picker ul.color-list li .box {
content: "";
display: inline-block;
height: 10px;
width: 30px;
margin-right: 10px;
}
.color-picker ul.color-list li.red .box {
background-color: #c71212;
}
.color-picker ul.color-list li.blue .box {
background-color: #0d89d1;
}
.color-picker ul.color-list li.green .box {
background-color: #18c771;
}
.color-picker .as-select .select-default {
border: 1px solid #d9d9d9;
padding: 10px 20px;
width: 200px;
margin-left: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color-picker">
<div class="color-box">
</div>
<div class="as-select">
<ul class="color-list">
<li class="red active">
<span class="box"></span>
<span class="text">Red</span>
</li>
<li class="blue">
<span class="box"></span>
<span class="text">Blue</span>
</li>
<li class="green">
<span class="box"></span>
<span class="text">Green</span>
</li>
</ul>
</div>
</div>
보시다시피 활성 요소는 같은 위치에 있습니다.
(파란색을 선택하고 드롭 다운을 다시 클릭)
선택한 요소를 목록의 첫 번째 자식으로 만들 수있는 방법입니까?
Flexbox 를 활용 하면 요소를 전혀 섞을 필요가 없습니다. CSS는 시각적으로 "이동"할 수 있습니다.
.color-picker ul.color-list {
display: inline-flex;
margin: 0;
flex-direction: column;
}
.color-picker ul.color-list li {
list-style: none;
border: 1px solid #d9d9d9;
padding: 10px;
cursor: pointer;
order:2;
width: 200px;
}
.color-picker ul.color-list li.active {
display: block;
order:1;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다