jquery - 在下拉菜单中单击时上升选中的单选按钮
问题描述
我创建了一个下拉菜单来更改货币。我有一个使用 JQuery 的模型,但结构并不完全相同。
问题是当我点击它时,我希望div
带有选中输入的 成为第一个,就像在这个例子中一样:
我怎样才能做到这一点 ?
$('.maincar__currency').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('expanded');
});
$(".maincar__currency label").click(function() {
$('#' + $(this).attr('for')).prop('checked', true);
});
$(document).click(function() {
$('.maincar__currency').removeClass('expanded');
});
.maincar__currency {
display: flex;
flex-direction: column;
position: relative;
min-height: 32px;
max-height: 32px;
margin-left: auto;
margin-bottom: 10px;
overflow: hidden;
border-radius: 6px;
box-sizing: border-box;
box-shadow: $shadowBox;
font-size: 14px;
font-weight: 500;
}
.maincar__currency label {
display: flex;
width: 80px;
height: 32px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 8px;
margin-right: 0 auto;
background-color: #fff;
text-align: center;
color: $mediumMainGrey;
cursor: pointer;
//box-sizing: border-box;
}
.maincar__currency label:hover {
background-color: $extraLightGrey;
}
.currency {
display: flex;
width: 100%;
}
.currency input {
display: none;
}
.currency img {
//object-fit: contain;
height: 20px;
width: auto;
margin-right: 6px;
}
.currency span {
display: flex;
//align-items: center;
color: $mediumMainGrey;
text-decoration: none;
}
.expanded {
max-height: 128px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="maincar__currency">
<label for="euro-radio-is">
<div class="currency currency__euro">
<img src="/assets/images/icons/euro.png" alt="Euro sign">
<input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked="true">
<span class="default">EUR</span>
</div>
</label>
<label for="dollar-radio-is">
<div class="currency currency__dollar">
<img src="/assets/images/icons/dollar.png" alt="Dollar sign">
<input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar">
<span>USD</span>
</div>
</label>
<label for="gbp-radio-is">
<div class="currency currency__pound">
<img src="/assets/images/icons/pound-sterling.png" alt="Pound sign">
<input type="radio" name="currency-is" id="gbp-radio-is" class="gbp_radio_is" value="gbp">
<span>GBP</span>
</div>
</label>
<label for="chf-radio-is">
<div class="currency currency__chf">
<img src="/assets/images/icons/swiss-franc.png" alt="Swiss franc sign">
<input type="radio" name="currency-is" id="chf-radio-is" class="chf_radio_is" value="chf">
<span>CHF</span>
</div>
</label>
</div>
解决方案
您只需将单击的标签添加到容器中,它就会将其移动到顶部:
var $container = $('.maincar__currency'); // cache this for better performance as you use it multiple times
$container.click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('expanded');
});
$(".maincar__currency label").click(function() {
$('#' + $(this).attr('for')).prop('checked', true);
// just prepend this label to the container and it will move it to the top:
$container.prepend($(this));
});
$(document).click(function() {
$container.removeClass('expanded');
});
.maincar__currency {
display: flex;
flex-direction: column;
position: relative;
min-height: 32px;
max-height: 32px;
margin-left: auto;
margin-bottom: 10px;
overflow: hidden;
border-radius: 6px;
box-sizing: border-box;
box-shadow: $shadowBox;
font-size: 14px;
font-weight: 500;
}
.maincar__currency label {
display: flex;
width: 80px;
height: 32px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 8px;
margin-right: 0 auto;
background-color: #fff;
text-align: center;
color: $mediumMainGrey;
cursor: pointer;
//box-sizing: border-box;
}
.maincar__currency label:hover {
background-color: $extraLightGrey;
}
.currency {
display: flex;
width: 100%;
}
.currency input {
display: none;
}
.currency img {
//object-fit: contain;
height: 20px;
width: auto;
margin-right: 6px;
}
.currency span {
display: flex;
//align-items: center;
color: $mediumMainGrey;
text-decoration: none;
}
.expanded {
max-height: 128px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="maincar__currency">
<label for="euro-radio-is">
<div class="currency currency__euro">
<img src="/assets/images/icons/euro.png" alt="Euro sign">
<input type="radio" name="currency-is" value="euro" id="euro-radio-is" class="euro_radio_is" checked="true">
<span class="default">EUR</span>
</div>
</label>
<label for="dollar-radio-is">
<div class="currency currency__dollar">
<img src="/assets/images/icons/dollar.png" alt="Dollar sign">
<input type="radio" name="currency-is" id="dollar-radio-is" class="dollar_radio_is" value="dollar">
<span>USD</span>
</div>
</label>
<label for="gbp-radio-is">
<div class="currency currency__pound">
<img src="/assets/images/icons/pound-sterling.png" alt="Pound sign">
<input type="radio" name="currency-is" id="gbp-radio-is" class="gbp_radio_is" value="gbp">
<span>GBP</span>
</div>
</label>
<label for="chf-radio-is">
<div class="currency currency__chf">
<img src="/assets/images/icons/swiss-franc.png" alt="Swiss franc sign">
<input type="radio" name="currency-is" id="chf-radio-is" class="chf_radio_is" value="chf">
<span>CHF</span>
</div>
</label>
</div>
推荐阅读
- python - Bumpversion: reset any part of the version
- android - android ndk opengl creating protected context
- regex - 提取子字符串的正则表达式是什么?
- sql - Create SQL column that subtracts two date columns
- java - Is there a lightweight REST client frameworks that allows parallel construction of requests?
- javascript - Javascript setTimeout: How to print the values given in the order?
- c# - Passing ADFS authenticated user's UPN to SQL string for connection
- javascript - 如果只选择了一个选项,则将文本添加到文本框
- javascript - 使用 javascript 实时流式传输 JSON 数据
- python - 上下文管理器在类错误中实现为“实例没有属性'__exit__'”