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

【问题标题】：Why does the ul element show when input is clicked?为什么单击输入时会显示 ul 元素？
【发布时间】：2020-07-25 07:55:40
【问题描述】：

由于某种原因，ul 得到display: none，即使单击 impute 元素也不会显示。这是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，但得到了相同的结果

【问题讨论】：

请edit您的问题并提供minimal reproducible example（这意味着您的代码必须在问题本身中）以及您的期望结果，您的实际结果，包括所有错误，并展示您的研究和您的尝试，并解释究竟是什么没有奏效。
</ul id='country-list'> 不是有效的 HTML。
你的代码在哪里调用了handleCountries？（我在 repl.it 中看到它，但你应该将它添加到这个问题中。
@Rojo Inside handleTestOut。问题就在这里。
@user4642212 抱歉，没看到。此外，我从未见过使用 jquery 运行的函数。你确定这行得通吗？你能指点我一个你看到使用 jQuery 运行函数的网站吗？无论如何，我不明白你为什么要用 jQuery 来运行一个函数而不是普通的 JavaScript。我会假设普通的 Javascript 会更快一些。

标签： html jquery css absolute

【解决方案1】：

你隐藏它：$('#country-list').hide();

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

你正在使用 jQuery 调用 handleTestOut 函数，而你调用 handleCountries 函数。这没有多大意义。

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

但你的主要问题是你没有#country id 你有.country CSS 类用于点击调用（或使用input.country 或.input 类，或全部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>

【讨论】：