Html 为什么点击输入时ul元素会显示？

由于某种原因，

ul

会得到

display:none

，并且即使在单击插补元素时也不会显示。 这是html 单击此按钮时：

 <input class="input country" type="text"/>

这是html：

 <div class="container">
            <input class="input country" type="text"/>
            <ul id='country-list'>
                <li id="US">United States</li>
            </ul>
            <button>explore</button>
        </div>

编辑：我删除了无效的html，但得到的结果与您隐藏它时得到的结果相同：

$（“#国家/地区列表”）.hide（）

这个函数互相调用是怎么回事

您正在使用jQuery调用
handleCountries
函数中的
handleTestOut
函数。这没有多大意义

如果将其从函数中删除，将得到完全相同的结果：

但是您的主要问题是您没有
#country
id，您没有
.country
CSS类用于单击调用（或使用
输入.country
或
输入
类，或全部
输入.country.input
）：
$（“#国家/地区列表”）.hide（）；
$（'.country'）。单击（函数（）{
$（“#国家/地区列表”）.show（）；
});
html{
身高：100%；
}
身体{
字体系列：“Nunito”，无衬线；
颜色：#1b4639；
背景：cbe2e4；
身高：100%；
}
.包装纸{
身高：100%；
保证金：0自动；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
p{
文本对齐：居中；
保证金：0；
字体大小：24px；
}
.集装箱{
位置：相对位置；
显示器：flex；
弯曲方向：立柱；
高度：200px；
}
.输入{
高度：30px；
边缘底部：50px；
}
保险商实验室{
高度：200px；
宽度：18%；
溢出：隐藏；
溢出y：滚动；
位置：绝对位置；
背景颜色：蓝色；
顶部：20px
}

文件
你好，世界


美国
阿富汗
奥兰群岛
阿尔巴尼亚
阿尔及利亚
美属萨摩亚
安道尔
安哥拉
安圭拉
南极洲
安提瓜和巴布达
阿根廷
亚美尼亚
阿鲁巴
澳大利亚
奥地利
阿塞拜疆
巴哈马群岛
巴林
孟加拉国
巴巴多斯
白俄罗斯
比利时
伯利兹
贝宁
百慕大
不丹
多民族玻利维亚国
博内尔、圣尤斯特修斯和萨巴
波斯尼亚和黑塞哥维那

探索
请回答您的问题并提供答案（这意味着，您的代码必须在问题本身中），以及您想要的结果、您的实际结果，包括所有错误，并演示您的研究和尝试，并解释哪些不起作用。
不是有效的HTML。在您的代码中，
handleCountries
在哪里？（我在repl.it中看到了它，但你应该把它添加到这个问题中。@Rojo Inside
handleTestOut
。它在问题中。@user4642212抱歉，没有看到。另外，我还从来没有见过使用jquery运行函数。你确定有效吗？你能告诉我一个网站，在那里你看到使用jquery运行函数吗？无论如何，我不明白为什么你可以用jQuery来运行一个函数，而不是普通的JavaScript。我假设普通的JavaScript会快一点。
function handleCountries() {
    $('#country-list').hide();
    $('#country').click(function () {
        $("#country-list").show();
    });
};

function handleTestOut() {
    handleCountries()
};

$(handleTestOut)

 <div class="container">
            <input class="input country" type="text"/>
            <ul id='country-list'>
                <li id="US">United States</li>
            </ul>
            <button>explore</button>
        </div>

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 200px;
}

.input {
  height: 30px;
  margin-bottom: 50px;
}

ul {
  height: 200px;
  width: 18%;
  overflow: hidden;
  overflow-y: scroll;
  position: absolute;
  background-color: blue;
  top: 20px
}