javascript - 自定义创建的下拉 onclick 函数未触发

Question

每当用户选择任何下拉菜单项时，我都会尝试触发单击功能，我这样做是因为我们无法设置下拉菜单的样式。

如果用户选择任何下拉项，它将使用其 ID 更新字段，以便在选择搜索时传递输入值。但当用户单击自定义下拉列表中的项目时，我无法触发该事件。

感谢任何帮助。运行该代码片段并尝试一下。

$(document).ready(function () {
	$(".dropdown-show").focus(function () {
		$(this).parent().addClass("show-dropdown");
	}).blur(function () {
		$(this).parent().removeClass("show-dropdown");
	});
	
});
function selectCountry(CountryId) {
	alert(CountryId);
}

.dropdown_menu {
	position: relative;
}

.dropdown-holder {
	background: #efefef;
	width: 250px;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	border-width: 0 1px 1px;
	border-style: solid;
	border-color: #dcdcdc;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 15;
	transform: scaleY(0);
	transform-origin: center top 0;
	transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, transform 0.1s ease-in-out;
}

.dropdown_menu.show-dropdown .dropdown-holder {
	opacity: 1;
	visibility: visible;
	transform: scaleY(1);
	transition: opacity 0.4s ease-in-out 0.1s, visibility 0.4s ease-in-out 0.1s, transform 0.3s ease-in-out;
}

.dropdown_header {
	background: #3351a6;
	color: #fff;
	font: 200 13px/1.38;
	display: block;
	padding: 11px 15px;
	border-bottom: .1rem solid #d8d8d8;
	position: relative;
}

.dropdown-list {
	max-height: 200px;
	padding: 0;
	overflow-y: auto;
	overflow-x: hidden;
}

.dropdown-list li {
	border-bottom: 1px solid #dcdcdc;
	display: block !important;
	width: 100% !important;
}

.dropdown-list li:last-child {
	background: transparent !important;
	text-align: inherit !important;
	color: inherit !important;
	text-transform: capitalize !important;
	height: auto !important;
	line-height: inherit !important;
	width: auto !important;
	float: inherit !important;
}

.dropdown-list li:last-child a {
	color: inherit !important;
	font-weight: normal !important;
}

.dropdown-list a {
	color: #212529;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: center;
	padding: 10px 15px;
	font-weight: 400;
}

.dropdown-list em {
	font-style: normal;
	text-align: left;
	width: 16%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="resp-tab-content hor_1 resp-tab-content-active" aria-labelledby="hor_1_tab_item-0" style="display:block">
    <ul class="list-unstyled search-barlist">

        <li>
            <div class="dropdown_menu">
                <input type="text" name="country_name" class="btn dropdown-show country_name" placeholder="Nationality">
                <input type="hidden" name="country" class="country">
                <div class="dropdown-holder">
                    <p class="dropdown_header">Select your country</p>
                    <ul class="dropdown-list">

                        <li>
                            <a href="javascript:void(0);" onclick="selectCountry('1')">
                                Afghanistan
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0);" onclick="selectCountry('2')">
                                Albania
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0);" onclick="selectCountry('3')">
                                Algeria
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0);" onclick="selectCountry('4')">
                                Andorra
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0);" onclick="selectCountry('5')">
                                Angola
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0);" onclick="selectCountry('6')">
                                Antigua and Barbuda
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0);" onclick="selectCountry('7')">
                                Argentina
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0);" onclick="selectCountry('8')">
                                Armenia
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0);" onclick="selectCountry('9')">
                                Australia
                            </a>
                        </li>


                        <li>
                            <a href="javascript:void(0);" onclick="selectCountry('240')">
                                Guernsey
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0);" onclick="selectCountry('241')">
                                Isle of Man
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0);" onclick="selectCountry('242')">
                                Jersey
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0);" onclick="selectCountry('243')">
                                Montenegro
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0);" onclick="selectCountry('244')">
                                Saint Martin
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0);" onclick="selectCountry('245')">
                                Mayotte
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0);" onclick="selectCountry('246')">
                                Sint Maarten
                            </a>
                        </li>

                        <li>
                            <a href="javascript:void(0);" onclick="selectCountry('247')">
                                South Sudan
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li>
            <button type="submit" class="btn btn-primary wrn-btn">Search</button>
        </li>
    </ul>
</div>

Answer 1

何时 show-dropdown类被删除

.blur(function () {
  $(this).parent().removeClass("show-dropdown");
})

代码，每个列表的a下拉列表中的元素开始缩小 transform: scaleY(0) CSS 规则，需要 0.1 秒 ( transition: ..., ..., transform 0.1s ease-in-out; )。那么，当用户点击 a 时，实际发生了什么？元素，它已经处于隐藏状态，因此 js 脚本未执行。

我可以看到 3 种解决方案:

1. 添加setTimeout到blur事件，例如:

   .blur(function () {
     setTimeout(_ => $(this).parent().removeClass("show-dropdown"), 500);
   })
   

2. 删除 transform: scaleY(0)和transform: scaleY(1) CSS 规则

3. 增加 transform 的过渡时间，类似:

   transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out, transform 0.5s ease-in-out;
   

   ( transform 0.1s ease-in-out 更改为 transform 0.5s ease-in-out )

此外，您不需要分配 transition下.dropdown_menu.show-dropdown .dropdown-holder选择器，将其分配在 .dropdown_menu .dropdown-holder 下足够。

我会采用第二个解决方案 - 删除 CSS 规则