jquery 代碼到 javascript 純在 select 盒子上

Question

您好，我無法將此代碼從 jquery 傳遞給純 js

我有這個：

 function xd() { const dropDown = document.querySelector(".dropdown-el"); dropDown.addEventListener("click", event(event)); function event(e){ e.preventDefault(); e.stopPropagation(); dropDown.classList.add('expanded') } }

 .dropdown-el { margin-top: 20vh; min-width: 12em; position: relative; display: inline-block; margin-right: 1em; min-height: 2em; max-height: 2em; overflow: hidden; top: 0.5em; cursor: pointer; text-align: left; white-space: nowrap; color: #444; outline: none; border: 0.06em solid transparent; border-radius: 1em; background-color: #cde4f5; transition: 0.3s all ease-in-out; }.dropdown-el input:focus + label { background: #def; }.dropdown-el input { width: 1px; height: 1px; display: inline-block; position: absolute; opacity: 0.01; }.dropdown-el label { border-top: 0.06em solid #d9d9d9; display: block; height: 2em; line-height: 2em; padding-left: 1em; padding-right: 3em; cursor: pointer; position: relative; transition: 0.3s color ease-in-out; }.dropdown-el label:nth-child(2) { margin-top: 2em; border-top: 0.06em solid #d9d9d9; }.dropdown-el input:checked + label { display: block; border-top: none; position: absolute; top: 0; width: 100%; }.dropdown-el input:checked + label:nth-child(2) { margin-top: 0; position: relative; }.dropdown-el::after { content: ""; position: absolute; right: 0.8em; top: 0.9em; border: 0.3em solid #3694d7; border-color: #3694d7 transparent transparent transparent; transition: 0.4s all ease-in-out; }.dropdown-el.expanded { border: 0.06em solid #3694d7; background: #fff; border-radius: 0.25em; padding: 0; box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px; max-height: 15em; }.dropdown-el.expanded label { border-top: 0.06em solid #d9d9d9; }.dropdown-el.expanded label:hover { color: #3694d7; }.dropdown-el.expanded input:checked + label { color: #3694d7; }.dropdown-el.expanded::after { transform: rotate(-180deg); top: 0.55em; }

 <div class="service_mode flex"> <span class="dropdown-el"> <input type="radio" name="sortType" value="Relevance" checked="checked" id="sort-relevance" /><label for="sort-relevance">Relevance</label> <input type="radio" name="sortType" value="Popularity" id="sort-best" /><label for="sort-best">Product Popularity</label> <input type="radio" name="sortType" value="PriceIncreasing" id="sort-low" /><label for="sort-low">Price Low to High</label> <input type="radio" name="sortType" value="PriceDecreasing" id="sort-high" /><label for="sort-high">Price High to Low</label> <input type="radio" name="sortType" value="ProductBrand" id="sort-brand" /><label for="sort-brand">Product Brand</label> <input type="radio" name="sortType" value="ProductName" id="sort-name" /><label for="sort-name">Product Name</label> </span> </div>

這是我需要傳遞給 javascript 的 jquery 代碼：

$('.dropdown-el').click(function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).toggleClass('expanded');
  $('#'+$(e.target).attr('for')).prop('checked',true);
});
$(document).click(function() {
  $('.dropdown-el').removeClass('expanded');
});

基本上我嘗試添加一個事件來添加 class 並刪除它，但沒有成功，我想不出如何添加和刪除 class: "expanded" 正確

有人可以幫我解決這個問題嗎？

Answer 1

第一：您需要調用xd() function

第二：代替event(event)您可以使用function(e){ event(e); } function(e){ event(e); }

第三：要刪除 class 使用.remove而不是.add

我將嵌套函數更改為expand和close .. 看下一段代碼

 function xd() { const dropDown = document.querySelector(".dropdown-el"); dropDown.addEventListener("click", function(e){expand(e)}); document.addEventListener("click", close); function expand(e){ e.preventDefault(); e.stopPropagation(); dropDown.classList.add('expanded'); } function close(){ dropDown.classList.remove('expanded'); } } xd();

 .dropdown-el { margin-top: 20vh; min-width: 12em; position: relative; display: inline-block; margin-right: 1em; min-height: 2em; max-height: 2em; overflow: hidden; top: 0.5em; cursor: pointer; text-align: left; white-space: nowrap; color: #444; outline: none; border: 0.06em solid transparent; border-radius: 1em; background-color: #cde4f5; transition: 0.3s all ease-in-out; }.dropdown-el input:focus + label { background: #def; }.dropdown-el input { width: 1px; height: 1px; display: inline-block; position: absolute; opacity: 0.01; }.dropdown-el label { border-top: 0.06em solid #d9d9d9; display: block; height: 2em; line-height: 2em; padding-left: 1em; padding-right: 3em; cursor: pointer; position: relative; transition: 0.3s color ease-in-out; }.dropdown-el label:nth-child(2) { margin-top: 2em; border-top: 0.06em solid #d9d9d9; }.dropdown-el input:checked + label { display: block; border-top: none; position: absolute; top: 0; width: 100%; }.dropdown-el input:checked + label:nth-child(2) { margin-top: 0; position: relative; }.dropdown-el::after { content: ""; position: absolute; right: 0.8em; top: 0.9em; border: 0.3em solid #3694d7; border-color: #3694d7 transparent transparent transparent; transition: 0.4s all ease-in-out; }.dropdown-el.expanded { border: 0.06em solid #3694d7; background: #fff; border-radius: 0.25em; padding: 0; box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px; max-height: 15em; }.dropdown-el.expanded label { border-top: 0.06em solid #d9d9d9; }.dropdown-el.expanded label:hover { color: #3694d7; }.dropdown-el.expanded input:checked + label { color: #3694d7; }.dropdown-el.expanded::after { transform: rotate(-180deg); top: 0.55em; }

 <div class="service_mode flex"> <span class="dropdown-el"> <input type="radio" name="sortType" value="Relevance" checked="checked" id="sort-relevance" /><label for="sort-relevance">Relevance</label> <input type="radio" name="sortType" value="Popularity" id="sort-best" /><label for="sort-best">Product Popularity</label> <input type="radio" name="sortType" value="PriceIncreasing" id="sort-low" /><label for="sort-low">Price Low to High</label> <input type="radio" name="sortType" value="PriceDecreasing" id="sort-high" /><label for="sort-high">Price High to Low</label> <input type="radio" name="sortType" value="ProductBrand" id="sort-brand" /><label for="sort-brand">Product Brand</label> <input type="radio" name="sortType" value="ProductName" id="sort-name" /><label for="sort-name">Product Name</label> </span> </div>

如何從純 JavaScript 的元素中刪除 class？

如何使用 JavaScript 更改元素的 class？

如何為 javascript 中的 DOM 元素獲取 HTML

如何在 javascript 中獲取此元素的 innerHTML？

如何使用 javascript 更改 HTML 元素值？

.parents() 沒有 jquery - 或 querySelectorAll 為父母