时间戳

首页 > 解决方案 > 在div外单击时关闭jquery功能

jquery - 在div外单击时关闭jquery功能

问题描述

我正在设计一个表单并有一些用于自定义选择下拉菜单的 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

标签： jqueryfunction

解决方案

除非对 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>

推荐阅读