jq 드롭다운 상자
<div class="alls">
<div class="item">
<div class="all">
<span class="alla"> span>
<span>
<div class="coinbig-c2c-sanj">div>
span>
div>
<div class="son">
<div class="son-input">
<img class="imgst" src="img/Group-2-copy.svg">
<input class="leftop" type="text">
div>
<div class="son1">
<div class="as">00000000div>
<div class="as">11111111div>
<div class="as">22222222div>
<div class="as">33333333div>
<div class="as">44444444div>
<div class="as">55555555div>
<div class="as">66666666div>
div>
div>
div>
div>
<span style="color:#0000ff;">if</span>($('.all').length > 0<span style="color:#000000;">) {
$(</span>'.all').on('click', <span style="color:#0000ff;">function</span><span style="color:#000000;">(e) {
</span><span style="color:#0000ff;">var</span> isShow = $(<span style="color:#0000ff;">this</span>).parents('.item').find('.son').is(':hidden'<span style="color:#000000;">);
isShow </span>? $(<span style="color:#0000ff;">this</span>).parents('.item').find('.son').slideDown(300) : $(<span style="color:#0000ff;">this</span>).parents('.item').find('.son').slideUp(300<span style="color:#000000;">);
e.preventDefault();
e.stopPropagation();
});
}
</span><span style="color:#0000ff;">if</span>($('.as').length > 0<span style="color:#000000;">) {
$(</span>'.as').on('click', <span style="color:#0000ff;">function</span><span style="color:#000000;">() {
$(</span><span style="color:#0000ff;">this</span>).parents('.item').find('.alla').text($(<span style="color:#0000ff;">this</span><span style="color:#000000;">).text());
$(</span>'.son').slideUp(300<span style="color:#000000;">);
});
}
$(</span>".leftop").on('click', <span style="color:#0000ff;">function</span><span style="color:#000000;">(e) {
e.preventDefault();
e.stopPropagation();
})
$(</span>".imgst").on('click', <span style="color:#0000ff;">function</span><span style="color:#000000;">(e) {
e.preventDefault();
e.stopPropagation();
})
</span>
.all {
width: 100%;
height: 46px;
display: block;
position: relative;
color: rgba(255,255,255,1);
}
.item {
width: 100%;
height: 100%;
background: #2b4071;
line-height: 48px;
border-left: 1px solid #2a404f;
cursor: pointer;
border: 1px solid #2f4a64;
border-radius: 3px;
}
.alla {
margin-left: 10px;
font-size: 18px;
position: relative;
font-size: 14px;
}
.as {
padding-left: 10px;
font-size: 14px;
}
.as:hover {
background: #495689;
}
.son {
width: 100%;
display: none;
background-color: #15284c;
position: absolute;
top: 48px;
z-index: 1;
}
.item {
position: relative;
}
.coinbig-c2c-sanj {
width: 0;
height: 0;
border-width: 7px;
border-style: solid;
border-color: #ffffff transparent transparent transparent;
background: #2b4071;
position: absolute;
right: 9px;
top: 20px;
}
.zida {
font-size: 18px;
}
.sonall {
width: 100%;
top: 48px;
}
.imgst {
float: right;
width: 16px;
height: 16px;
margin-top: 12px;
margin-right: 10px;
}
.leftop {
float: left;
width: 80%;
height: 100%;
border: none;
background: #15284c;
color: #FFFFFF;
padding-left: 10px;
box-sizing: border-box;
}
.son-input {
width: 90%;
height: 40px;
border: 1px solid #495d9a;
margin: 10px auto;
}
.son1 {
overflow-y: auto;
max-height: 192px;
color: #EEEFF7;
}
.son1::-webkit-scrollbar {
width: 3px;
height: 0px;
}
.son1::-webkit-scrollbar-button {
background-color: #15284c;
}
.son1::-webkit-scrollbar-track {
background: #15284c;
}
.son1::-webkit-scrollbar-thumb {
background: #2a404f;
border-radius: 10px;
}
.son1::-webkit-scrollbar-corner {
background: #2a404f;
}
.alls {
width: 300px;
}
다음으로 전송:https://www.cnblogs.com/chen527/p/11063617.html
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.