javascript - 使用 HTML CSS JS 为每个外部列表项创建链接
问题描述
当用户选择其中一个下拉链接时,它需要将它们带到一个网页我需要将 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>
解决方案
只需像这样在 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>
推荐阅读
- google-sheets - 查找值并将它们添加到动态工作表中的表中
- wordpress - 用户(图像)上的 WP ACF 字段不时消失
- list - 如果 Flutter 中的网格列表为空,则插入 Text()
- javascript - 两个复制文本按钮?
- python - 将字节正则表达式用于使用多个位块编码的字符的字符类
- laravel - 如何自定义 Laravel 注册表单错误信息?
- ios - 用它自己的 UITableViewCell 重叠 UITableView
- java - Spring Boot 变量重命名问题(Hibernate)
- r - 如何处理在 R 中读取 JSON 文件时发生的嵌套 list()?
- javascript - 使用节点运行 newman (Postman) 集合时如何处理异步调用?