我正在制作一个导航栏。单击具有子导航页的项目时,导航项目将展开或折叠。以下是 HTML/JS/CSS 代码片段。const navHasChilds = document.getElementsByClassName(\'ha...
我正在制作导航栏。单击具有子导航页的项目时,导航项目会展开或折叠。
这是 HTML/JS/CSS 代码片段。
const navHasChilds = document.getElementsByClassName("hasChild");
Array.from(navHasChilds).forEach(el => el.addEventListener('click', event => {
event.target.closest(".hasChild").querySelector(".subnav").classList.toggle('active');
event.target.closest(".hasChild").querySelector(".collapsible").classList.toggle('collapsible-expanded');
}));
body { background: #999; }
.collapsible {
color: white;
cursor: pointer;
padding: 0px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 17px;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-right: 8px;
}
.collapsible-expanded {
color: white;
cursor: pointer;
padding: 0px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 17px;
}
.collapsible-expanded:after {
content: '\2212';
color: white;
font-weight: bold;
float: right;
margin-right: 8px;
}
ul.subnav {
display: none
}
ul.subnav.active {
display: block;
}
<li class="hasChild"><a>System<i class="collapsible"> </i> </a>
<ul class="subnav">
<li><a onclick='EASauthorized("/setup.html")'>Setup</a></li>
<li><a onclick='EASauthorized("/date.html")'>Date</a></li>
<li><a onclick='EASauthorized("/languages.html")'>Languages</a></li>
<li><a onclick='EASauthorized("/settings.html")'>Settings</a></li>
<li><a onclick='EASauthorized("/mgmt.html")'>Management</a></li>
</ul>
</li>
现在,单击“子导航”类别下的项目时,导航项目会展开/折叠。我希望保留展开/折叠状态,直到单击 + 或 - 图标,而不是单击每个页面链接。(即)我希望事件侦听器仅适用于主导航菜单,而不适用于导航链接下的页面(子导航)。
这里有什么问题?
我如何使此下拉列表的每个项目都以全长单行显示,而不是换行?.autocomplete-items { /* position: absolute; */ /* border: 1px solid #ccc...
我如何使此下拉列表的每个项目都以全长单行显示,而不是换行显示?
.autocomplete-items {
/* position: absolute; */
/* border: 1px solid #ccc; */
/* border-top: none; */
/* border-radius: 0 0 4px 4px; */
z-index: 100;
top: 100%;
left: 0;
right: 0;
/* width: auto; */
max-height: 300px;
overflow-y: auto;
background-color: white;
color: black;
}
.autocomplete-items .item {
padding: 10px;
cursor: pointer;
background-color: white;
width: auto;
overflow:auto;
}
.autocomplete-items .item:hover {
background-color: #eee;
}
.autocomplete-items .item.active {
background-color: #e9e9e9;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="w-100 h-100 py-3">
<form action="/" method="post">
<div>
<div class="row my-3">
<div class="col"><input type="text" name="FirstName" id="FirstName" max_length="25" placeholder="Firstname" class="form-control" required="yes" ></div>
<div class="col"><input type="text" name="LastName" id="LastName" max_length="25" placeholder="Lastname" class="form-control" required="yes" ></div>
</div>
<div class="row my-3">
<div class="col">
<select name="Country" id="Country" class="form-control, form-select" aria-label="Default select example">
<option value="US">United States</option>
<option value="GB">United Kingdom</option>
</select>
</div>
<div class="col position-relative"><input type="text" name="Place" id="Place" label=" Place" max_length="25" list="PlaceSelect" autocomplete="off" placeholder=" City" class="form-control" required="" spellcheck="false" data-ms-editor="true" >
<div class="d-flex flex-column mb-3 position-absolute">
<ul class="autocomplete-items m-0 p-0 border" id="PlaceSelect" style="display: block;">
<li class="item">New York City, Long: -74.005970, Lati: 40.714270, TZ: America/New_York, Population: 8804190</li>
<li class="item">New South Memphis, Long: -90.056760, Lati: 35.086760, TZ: America/Chicago, Population: 641608</li>
<li class="item">New Orleans, Long: -90.075070, Lati: 29.954650, TZ: America/Chicago, Population: 389617</li>
<li class="item">Newark, Long: -74.172370, Lati: 40.735660, TZ: America/New_York, Population: 281944</li>
<li class="item">Newport News, Long: -76.429750, Lati: 36.980380, TZ: America/New_York, Population: 182385</li>
</ul>
</div>
</div>
<div class="col "><input type="number" name="Population" label="Zipcode" id="Zipcode" max_length="25" step="0.000001" min="-180" max="180" placeholder="Zipcode" class="form-control" required="yes" ></div>
<div class="col"><input type="number" name="Cost" label="Cost" id="Cost" max_length="25" step="0.000001" min="-180" max="180" placeholder="Cost" class="form-control" required="yes" ></div>
</div>
</div>
</form>
</div>
只需添加 white-space: nowrap;
到您的 .item
班级
.autocomplete-items {
/* position: absolute; */
/* border: 1px solid #ccc; */
/* border-top: none; */
/* border-radius: 0 0 4px 4px; */
z-index: 100;
top: 100%;
left: 0;
right: 0;
/* width: auto; */
max-height: 300px;
overflow-y: auto;
background-color: white;
color: black;
}
.autocomplete-items .item {
padding: 10px;
cursor: pointer;
background-color: white;
width: auto;
overflow: auto;
white-space: nowrap;
}
.autocomplete-items .item:hover {
background-color: #eee;
}
.autocomplete-items .item.active {
background-color: #e9e9e9;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="w-100 h-100 py-3">
<form action="/" method="post">
<div>
<div class="row my-3">
<div class="col"><input type="text" name="FirstName" id="FirstName" max_length="25" placeholder="Firstname" class="form-control" required="yes"></div>
<div class="col"><input type="text" name="LastName" id="LastName" max_length="25" placeholder="Lastname" class="form-control" required="yes"></div>
</div>
<div class="row my-3">
<div class="col">
<select name="Country" id="Country" class="form-control, form-select" aria-label="Default select example">
<option value="US">United States</option>
<option value="GB">United Kingdom</option>
</select>
</div>
<div class="col position-relative"><input type="text" name="Place" id="Place" label=" Place" max_length="25" list="PlaceSelect" autocomplete="off" placeholder=" City" class="form-control" required="" spellcheck="false" data-ms-editor="true">
<div class="d-flex flex-column mb-3 position-absolute">
<ul class="autocomplete-items m-0 p-0 border" id="PlaceSelect" style="display: block;">
<li class="item">New York City, Long: -74.005970, Lati: 40.714270, TZ: America/New_York, Population: 8804190</li>
<li class="item">New South Memphis, Long: -90.056760, Lati: 35.086760, TZ: America/Chicago, Population: 641608</li>
<li class="item">New Orleans, Long: -90.075070, Lati: 29.954650, TZ: America/Chicago, Population: 389617</li>
<li class="item">Newark, Long: -74.172370, Lati: 40.735660, TZ: America/New_York, Population: 281944</li>
<li class="item">Newport News, Long: -76.429750, Lati: 36.980380, TZ: America/New_York, Population: 182385</li>
</ul>
</div>
</div>
<div class="col "><input type="number" name="Population" label="Zipcode" id="Zipcode" max_length="25" step="0.000001" min="-180" max="180" placeholder="Zipcode" class="form-control" required="yes"></div>
<div class="col"><input type="number" name="Cost" label="Cost" id="Cost" max_length="25" step="0.000001" min="-180" max="180" placeholder="Cost" class="form-control" required="yes"></div>
</div>
</div>
</form>
</div>
使用时,navHasChilds = document.querySelectorAll(\'.hasChild > a\'); 单击 \'Setup\' 也会切换菜单。但我只想在单击 \'System\' 时切换。请检查编辑后的代码。我之前在 2 个地方使用了 Setup