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

Question

由于某种原因，ul 变成了 display: none，即使点击估算元素也不显示。这是 html 单击此按钮时：

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

这个 html 应该显示（但它没有）：

 <ul id='country-list'>
                <li id="US">United States</li>
 </ul>

这是 jQuery 代码：

function handleCountries() {
    $('#country-list').hide();
    $('#country').click(function () {
        $("#country-list").show();
    });
};

function handleTestOut() {
    handleCountries()
};

$(handleTestOut)

这是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>

这是一些css:

.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
}

Here is the full code

编辑：我删除了无效的 html，但得到了相同的结果

Answer 1

您将其隐藏为：$('#country-list').hide();

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

您正在使用 jQuery 调用 handleTestOut 函数，在您调用 handleCountries 函数。意义不大。

如果你把它放在函数之外，你会得到完全相同的结果：

但你的主要问题是你没有 #country id 你有 .country CSS class 用于点击调用（或使用 input.country 或.input class，或全部 input.country.input)：

$('#country-list').hide();

$('.country').click(function() {
  $("#country-list").show();
});

html {
  height: 100%;
}

body {
  font-family: 'Nunito', sans-serif;
  color: #1b4639;
  background: #cbe2e4;
  height: 100%;
}

.wrapper {
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

p {
  text-align: center;
  margin: 0;
  font-size: 24px;
}

.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
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
  <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
  <title>Document</title>
</head>

<body>
  <div class="wrapper">
    <p>Hello World!</p>
    <div class="container">
      <input class="input country" type="text" />
      <ul id='country-list'>
        <li id="US">United States</li>
        <li id="AF">Afghanistan</li>
        <li id="AX">Åland Islands</li>
        <li id="AL">Albania</li>
        <li id="DZ">Algeria</li>
        <li id="AS">American Samoa</li>
        <li id="AD">Andorra</li>
        <li id="AO">Angola</li>
        <li id="AI">Anguilla</li>
        <li id="AQ">Antarctica</li>
        <li id="AG">Antigua and Barbuda</li>
        <li id="AR">Argentina</li>
        <li id="AM">Armenia</li>
        <li id="AW">Aruba</li>
        <li id="AU">Australia</li>
        <li id="AT">Austria</li>
        <li id="AZ">Azerbaijan</li>
        <li id="BS">Bahamas</li>
        <li id="BH">Bahrain</li>
        <li id="BD">Bangladesh</li>
        <li id="BB">Barbados</li>
        <li id="BY">Belarus</li>
        <li id="BE">Belgium</li>
        <li id="BZ">Belize</li>
        <li id="BJ">Benin</li>
        <li id="BM">Bermuda</li>
        <li id="BT">Bhutan</li>
        <li id="BO">Bolivia, Plurinational State of</li>
        <li id="BQ">Bonaire, Sint Eustatius and Saba</li>
        <li id="BA">Bosnia and Herzegovina</li>
      </ul>
      <button>explore</button>
    </div>
  </div>
</body>

</html>

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

Why does the ul element show when input is clicked?

html

css

jquery

absolute