Question

我在尝试将标签放在类别列表中时遇到问题，但它的作用就像一个链接。我希望它表现为一个值：//如果您不理解我的问题，请使用类别列表检查这些网站网站：takealot.com，gumtree.co.za，amazon.com

每当您将鼠标悬停在“类别”列表上并单击“属性”时，请查看Gumtree.co.za，它不会将您带到另一页，它只会将自己插入到输入栏中，其作用就像一个值而不是一个链接

.dropdown {
  float: left;
  
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius: 12px;
  z-index: 1;
}


.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: rgb(0, 102, 255);
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

    <div class="dropdown">
     <input type="text" name="category" placeholder="Category" autocomplete="off" disabled="disabled" readonly="readonly" class="swer-t" id="catego">
            	        <div class="dropdown-content">
                        <a href="#"> All Categories</a>
                        <div class="dropdown2">
                        <a href="#"> Property</a>
                        <div class="dropdown-content2">
                             <a href="#">Vacation</a>
                             <a href="#"">Trip</a>
                             <a href="#">Holidays</a>
                             <a href="#">Homes</a>
                             <a href="#">Land</a>
                             <a href="#">Car</a>
                             <a href="#">Commercial </a>
                             <a href="#">Short Term</a>
                             <a href="#">Events</a>
                             <a href="#">Party</a>
                           </div>
                         </div>

Answer 1

我按原样保留了HTML和CSS（除了将错别字固定在“旅行”锚点上）。请参阅下面的JS代码中的注释，以了解其工作原理：

A + B + C = 180°

180° - 99.96° + 42.27°  + 2 * 28.85° = 180°

180° - 99.96° + 42.27°  + 2 * 28.85° = 180°

-99.96° + 42.27°  + 2 * 28.85° = 0°

42.27°  + 2 * 28.85° = 99.96°

B + C = Top angle

// find every `<a>` tag in your dropdown:
document.querySelectorAll('.dropdown-content a').forEach(function(anchor) {
  // add a "click" event listener to this anchor:
  anchor.addEventListener("click", function(evt) {
    // prevent normal navigation:
    evt.preventDefault();

    // set the input field value to this element's text:
    document.getElementById('catego').value = this.innerText;
  })
})

.dropdown {
  float: left;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: rgb(0, 102, 255);
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

类别列表中的锚标记

1 个答案: