使用 HTML CSS JS 為每個外部列表項創建鏈接

Question

當用戶選擇其中一個下拉鏈接時，它需要將它們帶到一個網頁我需要將 li 項目 1-4 鏈接到我卡住的網頁需要幫助創建鏈接提前感謝您的幫助。 下面我提供了代碼 HTML 和 CSS 和 JS 代碼。 再次感謝。 （我在這里添加更多文本以提交此問題，因此請務必忽略此部分）

 'use strict'; (function() { var _btns = document.querySelectorAll('.btn'), _eachBtn = function(callback) { Array.prototype.forEach.call(_btns, function(elem) { callback.call(this, elem); }); }, _initListener = function(e) { e.preventDefault(); e.stopPropagation(); _eachBtn(function(btn) { btn.classList.remove('dropdown-open') }); this.classList.toggle('dropdown-open'); }, _hideAll = function() { _eachBtn(function(btn) { btn.classList.remove('dropdown-open'); }); }; _eachBtn(function(btn) { btn.addEventListener('touchend', function(e) { _initListener.call(this, e); }); btn.addEventListener('click', function(e) { _initListener.call(this, e); }); }); document.addEventListener('touchend', function() { _hideAll(); }); document.addEventListener('click', function() { _hideAll(); }); })();

 .dropdown { position: relative; margin: 0 auto; width: 15em; }.dropdown >.outer-list { position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; transform: scale(0); opacity: 0; visibility: hidden; transition: all 0.35s ease; }.dropdown >.outer-list.top { align-items: flex-start; transform-origin: 50% 0; }.dropdown >.outer-list.left { justify-content: flex-start; }.dropdown >.outer-list.bottom { align-items: flex-end; transform-origin: 50% 100%; }.dropdown >.outer-list.right { justify-content: flex-end; }.dropdown >.outer-list > ul { list-style: none; padding: 0; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); border-radius: .2em; }.dropdown >.outer-list > ul li { padding: .25em 3em; margin: .25em; width: 100%; cursor: pointer; transition: background 0.35s ease; }.dropdown >.outer-list > ul li:hover { background: rgba(0, 0, 0, 0.07); } ``` ```.btn { position: relative; display: block; width: 100%; text-align: center; background: #03A9F4; color: #fff; padding: 1em; border-radius: .15em; cursor: pointer; transition: all 0.35s ease; overflow: hidden; }.btn:after { content: ''; position: absolute; bottom: -50%; right: -50%; z-index: 1; overflow: hidden; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transition: all 0.35s ease; }.btn:active:after, .btn.dropdown-open:after { width: 200%; height: 200%; }.btn:hover { box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.1); }.btn.dropdown-open +.outer-list { transform: scale(1); opacity: 1; visibility: visible; }

 <div class="dropdown"> <a href="#" class="btn"> Dropdown </a> <div class="outer-list"> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ul> </div> </div>

Answer 1

只需像這樣在 LI 標簽內添加鏈接

 <div class="dropdown">
  <a href="#" class="btn">
    Dropdown
  </a>
  <div class="outer-list">
    <ul>
      <li><a href="http://www.google.co.uk">List item 1</a></li>
      <li><a href="http://www.google.co.uk">List item 2</a></li>
      <li><a href="http://www.google.co.uk">List item 3</a></li>
      <li><a href="http://www.google.co.uk">List item 4</a></li>
    </ul>
  </div>
</div>

Answer 2

我修好了，謝謝我必須為列表創建新的 div class