Question

我创建了一个下拉菜单来更改币种。我有一个使用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>

https://codepen.io/j0be/pen/jWGVvV

Answer 1

您可以将单击的标签放在容器的前面，它将标签移到顶部：

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>

Answer 2

在Codepen中，例如

input:checked + label {
display:block;
border-top: none;
position: absolute;
top: 0;
width: 100%;

意味着每当选中输入时，其旁边的标签将获得绝对位置。

因此，您的想法是您的输入位于“静态位置”的“选定标签”下方，只需将代码添加到要显示“绝对类”的容器中，即可按代码选择一个。

在下拉菜单中单击时，升高选中的单选按钮

2 个答案: