在div外单击时关闭jquery功能答案

【问题标题】：Turn off jquery function when click outside div在div外单击时关闭jquery功能
【发布时间】：2019-04-02 14:21:46
【问题描述】：

我正在设计一个表单并且有一些用于自定义选择下拉菜单的 jquery，它的目的是在单击它时将边框颜色更改为黑色，但是当您单击另一个输入字段时，它应该重置为灰色，我有一个用于普通输入字段的切换类设置，但由于选择菜单是高度自定义的，我不得不使用以下代码更改颜色：

$('.select-selected').on('click', function(e){
    e.preventDefault();
    $(this).css('border', '1px solid black');
});

有没有办法添加到此，以便当您再次单击时，或者最好在.select-selected 之外单击时，它会重置功能并返回灰色边框？感谢任何帮助。

HTML：

<div class="custom-select" type="text" name="enquiry" style="width:100%;" style="max-width:100%;">
    <select class="input-select">
        <option value="0">Select Enquiry Type</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
     </select>
</div>

添加了 html 但 .select-selected 被更多的 javascript 添加到 div 中，可以在这里看到我使用的完整代码： https://www.w3schools.com/howto/howto_custom_select.asp

【问题讨论】：

必须是jquery吗？听起来 CSS 会更有意义....select-selected:focus { border:1px solid black; }
听起来处理模糊事件可能会有所帮助
您的 HTML 没有任何类 select-selected 的元素，因此 $('.select-selected') 将返回一个空集合。
添加了 HTML，但是还有更多的 javascript 将 select-selected 添加到 div 这就是为什么你在那里看不到它，是否可以在我提供的 jquery 中添加点击关闭功能? @freefaller 即使使用 '!important'，css 也不起作用
在$('.select-selected').on('click',function...) 绑定发生之后，您的脚本是否有可能添加了<select> 元素？

标签： jquery function

【解决方案1】：

除非对 jQuery 有特殊需求，否则我建议您可以完全使用 CSS 来实现...

.input-select { border:1px solid red; }
.input-select:focus { border:1px solid black; }

<div class="custom-select" type="text" name="enquiry" style="width:100%;" style="max-width:100%;">
    <select class="input-select">
        <option value="0">Select Enquiry Type</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
     </select>
</div>

否则，如果您确实需要通过 jQuery 进行操作，那么您可以使用 blur 事件...

$('.input-select').on('click', function(e){
    e.preventDefault();
    $(this).css('border', '1px solid black');
}).on('blur', function(e) {
    $(this).css('border', '');
});

.input-select { border:1px solid red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-select" type="text" name="enquiry" style="width:100%;" style="max-width:100%;">
    <select class="input-select">
        <option value="0">Select Enquiry Type</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
     </select>
</div>

【讨论】：

我在我跟随的 w3 页面中链接以制作选择框，w3 教程中的 css 关闭了默认选择框样式，以便自定义样式可以工作，因此样式化
@JTR - 抱歉，我没有注册您正在处理自定义控件。如果没有您提供我们可以使用的minimal reproducible example，我们将很难弄清楚发生了什么
在问题的链接中提供了完整的确切代码，感谢您的工作 - 当我点击触发它的区域之外时，只需停用该功能。