Javascript 角质（1）{break；} if（！（inputValue.substring（0，inputValue.length）==valueArray[j]。substring（0，inputValue.length）。toLowerCase（））{ dropdownItems[j].classList.add（'closed'）； }否则{ dropdownItems[j].classList.remove（'closed'）； } } window.CP.exitedLoop（1）； }否则{ 对于（var i=0；i
只要删除所有Javascript 角质（1）{break；} if（！（inputValue.substring（0，inputValue.length）==valueArray[j]。substring（0，inputValue.length）。toLowerCase（））{ dropdownItems[j].classList.add（'closed'）； }否则{ dropdownItems[j].classList.remove（'closed'）； } } window.CP.exitedLoop（1）； }否则{ 对于（var i=0；i,javascript,html,css,drop-down-menu,codepen,Javascript,Html,Css,Drop Down Menu,Codepen,只要删除所有if（window.CP.shouldStopExecution（*some number*）{break；}和 window.CP.exitedLoop（*一些数字*）修复您的问题 CP是一种用于退出无限循环的代码笔。 Codepen发布了一篇关于此功能的帖子，解释如下： “检测挂起for循环的逻辑很简单。可能太简单了。传递给shouldStopExecution函数的数字就是循环标识符 shouldStopExecution跟踪函数首次调用的时间。如果调用同一循环的时间超过75毫
if（window.CP.shouldStopExecution（*some number*）{break；}window.CP.exitedLoop（*一些数字*）修复您的问题
CP是一种用于退出无限循环的代码笔。
Codepen发布了一篇关于此功能的帖子，解释如下：
“检测挂起for循环的逻辑很简单。可能太简单了。传递给shouldStopExecution
函数的数字就是循环标识符
shouldStopExecution
跟踪函数首次调用的时间。如果调用同一循环的时间超过75毫秒，我们将中断该循环。”
src:只要删除所有if（window.CP.shouldStopExecution（*some number*）{break；}
和
window.CP.exitedLoop（*一些数字*）修复您的问题
CP是一种用于退出无限循环的代码笔。
Codepen发布了一篇关于此功能的帖子，解释如下：
“检测挂起for循环的逻辑很简单。可能太简单了。传递给shouldStopExecution
函数的数字就是循环标识符
shouldStopExecution
跟踪函数首次调用的时间。如果调用同一循环的时间超过75毫秒，我们将中断该循环。”
src:检查控制台-您有无法读取未定义的属性“shouldStopExecution”的错误。您尝试访问window.CP.shouldStopExecution
，但事先未定义window.CP
。您是对的，控制台显示错误。由于我不熟悉JavaScript，我不知道如何事先定义window.CP
。只需编写window.CP=未定义之后var valueSubstring=未定义似乎不起作用。如何定义window.CP
？作为一名经验丰富的JS开发人员，也许您可以告诉我为什么不需要在Codepen上定义window.CP
。谢谢因为CP代表CodePen…请检查您的控制台-您有无法读取未定义的错误的属性'shouldStopExecution'。您尝试访问window.CP.shouldStopExecution
，但事先未定义window.CP
。您是对的，控制台显示错误。由于我不熟悉JavaScript，我不知道如何事先定义window.CP
。只需编写window.CP=未定义之后var valueSubstring=未定义似乎不起作用。如何定义window.CP
？作为一名经验丰富的JS开发人员，也许您可以告诉我为什么不需要在Codepen上定义window.CP
。谢谢因为CP代表代码笔…山姆，谢谢你的回答。似乎这是一个无限循环的问题。删除if（window.CP.shouldStopExecution（1））{break；}
和window.CP.exitedLoop（2）阻止下拉菜单工作。（参见此处：）我玩了一会儿，例如删除了window.CP.exitedLoop（1）
和if（window.CP.shouldStopExecution（2））{break；}
。但是我仍然没有让它工作。很抱歉，刚刚更新了我的答案，在select-dropdown-2.bitballow.com上的代码中，我仍然看到一些。CP行我在第224行中也看到一个错误，您没有使用打开for循环{
Ahh！是的，现在它工作了。非常好！非常感谢你的代码和解释。山姆，谢谢你的回答。这似乎是一个无限循环问题。删除if（window.CP.shouldStopExecution（1））{break；}
和window.CP.exitedLoop（2）；
会阻止下拉菜单工作。（请参阅此处：）我玩了一会儿，例如删除了window.CP.exitedLoop（1）；
和if（window.CP.shouldStopExecution（2））{break；}
也一样。但我仍然无法让它工作。很抱歉，刚刚更新了我的答案，在select-dropdown-2.bitballow.com上的代码中，我仍然看到一些。CP行我在第224行也看到一个错误，您没有使用{
打开for循环啊！是的，现在它工作了。非常好！非常感谢您的代码和解释。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
height: 100vh;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
font-family: 'Ek Mukta';
text-transform: uppercase;
font-weight: 600;
letter-spacing: 4px;
background: #1D1F20;
}
h1 {
margin-top: 10vh;
font-size: 2.5rem;
max-width: 500px;
letter-spacing: 3px;
text-align: center;
line-height: 1.5;
font-family: 'Open Sans';
text-transform: capitalize;
font-weight: 800;
color: white;
}
h1 span {
color: #FF908B;
}
form {
position: relative;
width: 18rem;
margin-top: 8vh;
}
.chosen-value,
.value-list {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.chosen-value {
font-family: 'Ek Mukta';
text-transform: uppercase;
font-weight: 600;
letter-spacing: 4px;
height: 4rem;
font-size: 1.1rem;
padding: 1rem;
background-color: #FAFCFD;
border: 3px solid transparent;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.chosen-value::-webkit-input-placeholder {
color: #333;
}
.chosen-value:hover {
background-color: #FF908B;
cursor: pointer;
}
.chosen-value:hover::-webkit-input-placeholder {
color: #333;
}
.chosen-value:focus, .chosen-value.open {
box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2);
outline: 0;
background-color: #FF908B;
color: #000;
}
.chosen-value:focus::-webkit-input-placeholder, .chosen-value.open::-webkit-input-placeholder {
color: #000;
}
.value-list {
list-style: none;
margin-top: 4rem;
box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.2);
overflow: hidden;
max-height: 0;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.value-list.open {
max-height: 320px;
overflow: auto;
}
.value-list li {
position: relative;
height: 4rem;
background-color: #FAFCFD;
padding: 1rem;
font-size: 1.1rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
-webkit-transition: background-color .3s;
transition: background-color .3s;
opacity: 1;
}
.value-list li:hover {
background-color: #FF908B;
}
.value-list li.closed {
max-height: 0;
overflow: hidden;
padding: 0;
opacity: 0;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Ek+Mukta:300,400,600|Open+Sans:400,800" rel="stylesheet">
<h1><span>Styled</span> and <span>filterable</span> select dropdown</h1>
<form>
<input class="chosen-value" type="text" value="" placeholder="Type to filter">
<ul class="value-list">
<li>Alabama</li>
<li>Alaska</li>
<li>Arizona</li>
<li>Arkansas</li>
<li>California</li>
<li>Colorado</li>
<li>Connecticut</li>
<li>Delaware</li>
<li>Florida</li>
<li>Georgia</li>
<li>Hawaii</li>
<li>Idaho</li>
<li>Illinois</li>
<li>Indiana</li>
<li>Iowa</li>
<li>Kansas</li>
<li>Kentucky</li>
<li>Louisiana</li>
<li>Maine</li>
<li>Maryland</li>
<li>Massachusetts</li>
<li>Michigan</li>
<li>Minnesota</li>
<li>Mississippi</li>
<li>Missouri</li>
<li>Montana</li>
<li>Nebraska</li>
<li>Nevada</li>
<li>New Hampshire</li>
<li>New Jersey</li>
<li>New Mexico</li>
<li>New York</li>
<li>North Carolina</li>
<li>North Dakota</li>
<li>Ohio</li>
<li>Oklahoma</li>
<li>Oregon</li>
<li>Pennsylvania</li>
<li>Rhode Island</li>
<li>South Carolina</li>
<li>South Dakota</li>
<li>Tennessee</li>
<li>Texas</li>
<li>Utah</li>
<li>Vermont</li>
<li>Virginia</li>
<li>Washington</li>
<li>West Virginia</li>
<li>Wisconsin</li>
<li>Wyoming</li>
</ul>
</form>
<script>
'use strict';
var inputField = document.querySelector('.chosen-value');
var dropdown = document.querySelector('.value-list');
var dropdownArray = [].concat(document.querySelectorAll('li'));
var dropdownItems = dropdownArray[0];
dropdown.classList.add('open');
inputField.focus(); // Demo purposes only
var valueArray = [];
dropdownItems.forEach(function (item) {
valueArray.push(item.textContent);
});
var closeDropdown = function closeDropdown() {
dropdown.classList.remove('open');
};
inputField.addEventListener('input', function () {
dropdown.classList.add('open');
var inputValue = inputField.value.toLowerCase();
var valueSubstring = undefined;
if (inputValue.length > 0) {
for (var j = 0; j < valueArray.length; j++) {if (window.CP.shouldStopExecution(1)){break;}
if (!(inputValue.substring(0, inputValue.length) === valueArray[j].substring(0, inputValue.length).toLowerCase())) {
dropdownItems[j].classList.add('closed');
} else {
dropdownItems[j].classList.remove('closed');
}
}
window.CP.exitedLoop(1);
} else {
for (var i = 0; i < dropdownItems.length; i++) {if (window.CP.shouldStopExecution(2)){break;}
dropdownItems[i].classList.remove('closed');
}
window.CP.exitedLoop(2);
}
});
dropdownItems.forEach(function (item) {
item.addEventListener('click', function (evt) {
inputField.value = item.textContent;
dropdownItems.forEach(function (dropdown) {
dropdown.classList.add('closed');
});
});
});
inputField.addEventListener('focus', function () {
inputField.placeholder = 'Type to filter';
dropdown.classList.add('open');
dropdownItems.forEach(function (dropdown) {
dropdown.classList.remove('closed');
});
});
inputField.addEventListener('blur', function () {
inputField.placeholder = 'Select state';
dropdown.classList.remove('open');
});
document.addEventListener('click', function (evt) {
var isDropdown = dropdown.contains(evt.target);
var isInput = inputField.contains(evt.target);
if (!isDropdown && !isInput) {
dropdown.classList.remove('open');
}
});
</script>
</html>