时间戳

首页 > 解决方案 > 如何创建一个仅在单击/切换时才显示某些输入的按钮？

html - 如何创建一个仅在单击/切换时才显示某些输入的按钮？

问题描述

我正在尝试创建完全相同的按钮（视觉下拉）“价格范围”，就像本网站中的那个：https ://dubai.dubizzle.com/en/property-for-rent/residential/apartmentflat/

这个按钮： 在此处输入图像描述

/* CSS */

.button_wrapper {
  background: white none repeat scroll 0% 0%;
  border-radius: 6px;
  height: 48px;
}

button {
  display: flex;
  -moz-box-pack: justify;
  justify-content: space-between;
  -moz-box-align: center;
  align-items: center;
  height: 100%;
  color: black;
  font-size: 14px;
  box-sizing: border-box;
  padding: 0px 6px 0px 12px;
  border: 0px none;
  width: 100%;
  background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;
  text-align: left;
  cursor: pointer;
}

.lnhPTn {
  position: absolute;
  background: white none repeat scroll 0% 0%;
  color: rgb(182, 184, 185);
  margin-top: 4px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid rgb(43, 45, 46);
  height: auto;
  padding: 16px;
}

.kFCjgJ {
  display: flex;
  align-items: flex-end;
  -moz-box-pack: center;
  justify-content: center;
}

.gacQrk {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.43;
  color: rgb(43, 45, 46);
}

.fmQggb {
  display: block;
  width: 180px;
  border-radius: 6px;
  border: 1px solid rgb(182, 184, 185);
  height: 48px;
  padding: 8px 12px;
  box-sizing: border-box;
  font-size: 14px;
  box-shadow: none;
}

..jaNqhG {
  border: 0px none;
  width: 8px;
  margin: 0px 6px 18px;
  height: 1px;
  background: rgb(43, 45, 46) none repeat scroll 0% 0%;
}
<!-- HTML -->
<!-- BUTTON STARTS HERE -->
<div class="button_wrapper">
  <button type="button" class="button_price">
        <span class="button_span">Any</span>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M6 9l6 6 6-6"></path>
            </svg>
    </button>
  <div class="lnhPTn">
    <div class="bkwgFh">
      <div class="kFCjgJ">
        <label class="gacQrk" for="min">
                Min
                <input class="fmQggb" type="number" step="1000" min="0" max="100000000" id="min">
            </label>
        <span class="jaNqhG"></span>


        <label class="gacQrk" for="max">
                Max
                <input class="fmQggb" type="number" step="1000" min="0" max="100000000" id="max">
            </label>
      </div>
    </div>
  </div>
</div>
<!-- BUTTON ENDS HERE -->

如何仅在单击/切换按钮时显示按钮下方的 div（包含输入的 div）并在单击/切换其他内容时自动关闭（例如下一个按钮或搜索）？

标签： htmlcssforms

解决方案

3步中最简单的解决方案-

  1. 在按钮上添加onclick="document.querySelector('.lnhPTn').style.display=document.querySelector('.lnhPTn').style.display=='block'?'none':'block'"属性。
  2. 添加
<script>
  window.onclick=function (e){
  var buttonPrice =document.querySelector(".button_price");
  var mainDiv=document.querySelector(".lnhPTn");
  var inputs=document.querySelectorAll(".lnhPTn input")
  console.log(inputs.length)
    if(e.target!=buttonPrice && e.target!=mainDiv &&  e.target!=inputs[0] && e.target!=inputs[1]){
      mainDiv.style.display="none";
    }
  }

</script>

在正文标签的末尾。

  1. 在 css 中将主 div 的显示设置为无。

所以你的最终代码看起来像

button_wrapper {
  background: white none repeat scroll 0% 0%;
  border-radius: 6px;
  height: 48px;
}

button {
  display: flex;
  -moz-box-pack: justify;
  justify-content: space-between;
  -moz-box-align: center;
  align-items: center;
  height: 100%;
  color: black;
  font-size: 14px;
  box-sizing: border-box;
  padding: 0px 6px 0px 12px;
  border: 0px none;
  width: 100%;
  background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;
  text-align: left;
  cursor: pointer;
}

.lnhPTn {
  display:none;
  position: absolute;
  background: white none repeat scroll 0% 0%;
  color: rgb(182, 184, 185);
  margin-top: 4px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid rgb(43, 45, 46);
  height: auto;
  padding: 16px;
}

.kFCjgJ {
  display: flex;
  align-items: flex-end;
  -moz-box-pack: center;
  justify-content: center;
}

.gacQrk {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.43;
  color: rgb(43, 45, 46);
}

.fmQggb {
  display: block;
  width: 180px;
  border-radius: 6px;
  border: 1px solid rgb(182, 184, 185);
  height: 48px;
  padding: 8px 12px;
  box-sizing: border-box;
  font-size: 14px;
  box-shadow: none;
}

..jaNqhG {
  border: 0px none;
  width: 8px;
  margin: 0px 6px 18px;
  height: 1px;
  background: rgb(43, 45, 46) none repeat scroll 0% 0%;
}
<!-- HTML -->
<!-- BUTTON STARTS HERE -->
<div class="button_wrapper">
  <button type="button" class="button_price" onclick="document.querySelector('.lnhPTn').style.display=document.querySelector('.lnhPTn').style.display=='block'?'none':'block'">
        <span class="button_span">Any</span>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M6 9l6 6 6-6"></path>
            </svg>
    </button>
  <div class="lnhPTn">
    <div class="bkwgFh">
      <div class="kFCjgJ">
        <label class="gacQrk" for="min">
                Min
                <input class="fmQggb" type="number" step="1000" min="0" max="100000000" id="min">
            </label>
        <span class="jaNqhG"></span>


        <label class="gacQrk" for="max">
                Max
                <input class="fmQggb" type="number" step="1000" min="0" max="100000000" id="max">
            </label>
      </div>
    </div>
  </div>
</div>
<!-- BUTTON ENDS HERE -->
<script>
  window.onclick=function (e){
  var buttonPrice =document.querySelector(".button_price");
  var mainDiv=document.querySelector(".lnhPTn");
  var inputs=document.querySelectorAll(".lnhPTn input")
    if(e.target!=buttonPrice && e.target!=mainDiv &&  e.target!=inputs[0] && e.target!=inputs[1]){
      mainDiv.style.display="none";
    }
  }

</script>

这是一个带有此代码的工作 jsfiddle https://jsfiddle.net/o48ps293/

推荐阅读