我想创建类别的下拉菜单。页面首次加载时,我希望下拉菜单中显示“类别”。我希望能够单击“ Tops”之类的类别。然后,下拉菜单的标题更改为“顶部”,而不是类别。我不太确定如何启动它,我在编码方面还很陌生。在W3上找到了一些代码用作我的基准。
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
Javascript
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
这是一种方法,无需仅使用JavaScript的html和CSS来创建下拉列表,而无需使用JavaScript来处理名称更改事件
要注意的一件事是,当使用]设置新名称时>
title.innerHTML = name ;
它会破坏原始列表并覆盖它,因此在该语句之后,我们必须使用]添加该列表。
title.appendChild(list)
这里是工作代码...
var title = document.getElementById('title'); var list = document.getElementById('list'); let c1 = document.getElementById('c1'); let c2 = document.getElementById('c2'); let c3 = document.getElementById('c3'); var namec1 = c1.innerHTML; var namec2 = c2.innerHTML; var namec3 = c3.innerHTML; //console.log(name) c1.addEventListener("click", function(e){ renameTitle(namec1) // Add more event stuff here }); c2.addEventListener("click", function(e){ renameTitle(namec2) // Add more event stuff here }); c3.addEventListener("click", function(e){ renameTitle(namec3) // Add more event stuff here }); function renameTitle(name) { var title = document.getElementById('title'); title.innerHTML = name ; title.appendChild(list) }
a { text-decoration: none; } nav { font-family: monospace; } ul { background: darkorange; list-style: none; margin: 0; padding-left: 0; } li { color: #fff; background: darkorange; display: block; float: left; padding: 1rem; position: relative; text-decoration: none; transition-duration: 0.5s; } li a { color: #fff; } li:hover, li:focus-within { background: red; cursor: pointer; } li:focus-within a { outline: none; } ul li ul { background: orange; visibility: hidden; opacity: 0; min-width: 5rem; position: absolute; transition: all 0.5s ease; margin-top: 1rem; left: 0; display: none; } ul li:hover > ul, ul li:focus-within > ul, ul li ul:hover, ul li ul:focus { visibility: visible; opacity: 1; display: block } ul li ul li { clear: both; width: 100%; }
<nav role="navigation"> <ul> <li id='title'> Categories <ul class="dropdown" id='list'> <li id='c1'>Sub-1</li> <li id='c2'>Sub-2</li> <li id='c3'>Sub-3</li> </ul> </li> </ul> </nav>
您的注释的一部分,以创建一个catogories元素并将其添加到列表中,然后添加
ver ele = document.create
var newItem = document.createElement('li');
newItem .innerHTML = 'catogories';
var list = document.getElementById("list"); // Get the <ul> element to insert a new node
list.insertBefore(newItem, list.childNodes[0]); // Insert <li> before the first child of <ul>
<nav role="navigation">
<ul>
<li id='title'> Categories
<ul class="dropdown" id='list'>
<li id='c1'>Sub-1</li>
<li id='c2'>Sub-2</li>
<li id='c3'>Sub-3</li>
</ul>
</li>
</ul>
</nav>