如何自定义我的标准构面下拉菜单？

问题描述

我想了解如何更改下拉菜单的设计，如 here 所示。

我复制了代码以便您可以看到它并复制了我的页面（元素）生成的 html。

重要的是要知道！我对我的 html 没有影响和控制我只能使用这个片段

更改选择器。

add_filter( 'facetwp_facet_html',function( $output,$params ) {
    if ( 'dropdown' == $params['facet']['type'] ) {
        $output = str_replace( 'facetwp-dropdown','facetwp-dropdown form-control',$output );
    }
    return $output;
},10,2 );

如何使用我描述的方法将我的下拉列表转换为特斯拉风格的下拉列表？

for (const dropdown of document.querySelectorAll(".custom-select-wrapper")) {
    dropdown.addEventListener('click',function () {
        this.querySelector('.custom-select').classList.toggle('open');
    })
}

for (const option of document.querySelectorAll(".custom-option")) {
    option.addEventListener('click',function () {
        if (!this.classList.contains('selected')) {
            this.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
            this.classList.add('selected');
            this.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = this.textContent;
        }
    })
}

window.addEventListener('click',function (e) {
    for (const select of document.querySelectorAll('.custom-select')) {
        if (!select.contains(e.target)) {
            select.classList.remove('open');
        }
    }
});

function selectOption(index) {
    var optionOnIdx = document.querySelector('.custom-option:nth-child('+index+')');
  var optionSelected = document.querySelector('.custom-option.selected');
  if (optionOnIdx !== optionSelected) {
    optionSelected.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
            optionOnIdx.classList.add('selected');
            optionOnIdx.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = optionOnIdx.textContent;
        }
}

document.querySelector('button').addEventListener("click",function(){
    selectOption(2);
});

*,*:after,*:before {
  Box-sizing: border-Box;
}

.container {
  margin: 0px;
  max-width: 300px;
}

.custom-select-wrapper {
  position: relative;
  user-select: none;
  width: 100%;
}

.custom-select {
  display: flex;
  flex-direction: column;
  border-width: 0 2px 0 2px;
  border-style: solid;
  border-color: #394a6d;
}

.custom-select__trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  font-size: 20px;
  font-weight: 300;
  color: #3b3b3b;
  height: 60px;
  line-height: 60px;
  background: #ffffff;
  cursor: pointer;
  border-width: 2px 0 2px 0;
  border-style: solid;
  border-color: #394a6d;
}

.custom-options {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  right: 0;
  border: 2px solid #394a6d;
  border-top: 0;
  background: #fff;
  transition: all 0.5s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2;
}

.custom-select.open .custom-options {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.custom-option {
  position: relative;
  display: block;
  padding: 0 22px 0 22px;
  font-size: 22px;
  font-weight: 300;
  color: #3b3b3b;
  line-height: 60px;
  cursor: pointer;
  transition: all 0.5s;
}

.custom-option:hover {
  cursor: pointer;
  background-color: #b2b2b2;
}

.custom-option.selected {
  color: #ffffff;
  background-color: #305c91;
}

.arrow {
  position: relative;
  height: 15px;
  width: 15px;
}

.arrow::before,.arrow::after {
  content: "";
  position: absolute;
  bottom: 0px;
  width: 0.15rem;
  height: 100%;
  transition: all 0.5s;
}

.arrow::before {
  left: -5px;
  transform: rotate(45deg);
  background-color: #394a6d;
}

.arrow::after {
  left: 5px;
  transform: rotate(-45deg);
  background-color: #394a6d;
}

.open .arrow::before {
  left: -5px;
  transform: rotate(-45deg);
}

.open .arrow::after {
  left: 5px;
  transform: rotate(45deg);
}

              My dropdown
              
              <div class="elementor-widget-container">
                <div class="elementor-shortcode">
                  <div class="facetwp-facet facetwp-facet-transaction facetwp-type-dropdown" data-name="transaction" data-type="dropdown"><select class="facetwp-dropdown">
                      <option value="">Any</option>
                      <option value="Rent">Rent</option>
                      <option value="Sale">Sale</option>
                    </select></div>
                </div>
              </div>
            
              <div class="elementor-widget-container">
                <div class="elementor-shortcode">
                  <div class="facetwp-facet facetwp-facet-type facetwp-type-dropdown" data-name="type" data-type="dropdown"><select class="facetwp-dropdown">
                      <option value="">Any</option>
                      <option value="apartment">Apartment</option>
                      <option value="office">Office</option>
                      <option value="shop">Shop</option>
                    </select></div>
                </div>
              </div>
          
              <div class="elementor-widget-container">
                <div class="elementor-shortcode">
                  <div class="facetwp-facet facetwp-facet-city facetwp-type-dropdown" data-name="city" data-type="dropdown"><select class="facetwp-dropdown">
                      <option value="">Any</option>
                      <option value="new-york">New York</option>
                      <option value="london">London</option>
                      <option value="canada">Canada</option>         
                    </select></div>
                </div>
              </div>            
              
              
              
         
              the custom dropdown
              <div class="container">
        <div class="custom-select-wrapper">
            <div class="custom-select">
                <div class="custom-select__trigger"><span>Tesla</span>
                    <div class="arrow"></div>
                </div>
                <div class="custom-options">
                    <span class="custom-option selected" data-value="tesla">Tesla</span>
                    <span class="custom-option" data-value="volvo">Volvo</span>
                    <span class="custom-option" data-value="mercedes">Mercedes</span>
                </div>
            </div>
        </div>
    </div>
    
    <button>
    Select Volvo
    </button>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）