在下拉清单之外单击时如何关闭下拉清单，但在选择textarea时如何防止关闭它？

Question

I created a dropdown checklist which opens a textarea when the last option is checked. 我创建了一个下拉清单，在选中最后一个选项时会打开一个文本区域。 I need to be able to close the dropdown when I click outside of it. 我需要能够在下拉菜单之外单击时关闭它。 I'm using this code for it 我正在使用此代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <meta name="author" content="">

    <script src="js/jquery.min.js"></script>  
</head>
<body>
<div class="row inner-container">
                    <div class="group">
                        <div class="styled-select control-group">
                            <div class="controls">
                                <div id="list2" class="dropdown-check-list" tabindex="100">
                                    <span class="anchor">-- Selecteer uw reparatie --</span>
                                    <ul class="items">
                                        <li class="item first-item">
                                            <input id="dropdown-check-list-01" type="checkbox" />
                                            <label for="dropdown-check-list-01"><span></span>option 1</label>                                            
                                        </li>           
                                        <li class="item">
                                            <input id="dropdown-check-list-02" type="checkbox" />
                                            <label for="dropdown-check-list-02"><span></span>option 2</label>
                                        </li>
                                        <li class="item overige">
                                            <input id="dropdown-check-list-07" type="checkbox" name="messagetick" />
                                            <label for="dropdown-check-list-07"><span></span>Other</label>
                                            <div class="contactmessage">
                                                <textarea name="setmessage" cols="25" rows="5"></textarea>
                                            </div>
                                            <script type="text/javascript">
                                                $('input[name="messagetick"]').click(function() {
                                                    $('.contactmessage').toggle(this.checked);
                                                });
                                                $('input[name="messagetick"]').change(function(){
                                                    if($(this).is(":checked")) {
                                                        $('li.overige').addClass("checked");
                                                    } else {
                                                        $('li.overige').removeClass("checked");
                                                    }
                                                });
                                            </script>
                                        </li>

                                    </ul>                            
                                </div>
                            </div>
                        </div>
                        <script type="text/javascript">                    
                            jQuery(function ($) {
                                var checkList = $('.dropdown-check-list');
                                checkList.on('click', 'span.anchor', function(event){
                                    var element = $(this).parent();

                                    if ( element.hasClass('visible'))
                                    {
                                        element.removeClass('visible');
                                    }
                                    else
                                    {
                                        element.addClass('visible');
                                    }

                                    checkList.on("blur", function() {
                                        if ($("textarea[name='setmessage']").not(':focus')) {
                                            element.removeClass('visible');
                                        }
                                    });
                                });
                            });

                        </script>
                    </div>
                </div>
<style>

.dropdown-check-list {
    border-radius: 2px;
    display: inline-block;
    padding-left: 0;    
}

.dropdown-check-list .anchor {  
    cursor: pointer;
    display: inline-block;
    height: 47px;
    line-height: 48px;
    padding: 0 40px 0 20px;
    position: relative;
    width: 468px;
}

.dropdown-check-list ul.items {
    border-top: 1px solid #dedede;      
    display: none;
    margin: 0;
    padding: 0;

}

.dropdown-check-list ul.items li {
    height: 36x;
    list-style: none;
}

.dropdown-check-list ul.items li.item:hover {
    background: #005a84;
}

.dropdown-check-list ul.items li.item:hover label,
.dropdown-check-list ul.items li.item:hover .icon-info-sign {
    color: #fff;
}

.dropdown-check-list ul.items li.item:first-of-type {   
    margin-top: 10px;
}

.dropdown-check-list ul.items .totaalprijs {
    font-weight: bold;
    padding: 20px;
}

.dropdown-check-list.visible .items {
    display: block;
}

.dropdown-check-list input, .dropdown-check-list label {
    display: inline-block;
    line-height: 36px;
    margin: 0;
    width: auto;    
}

.dropdown-check-list input[type=checkbox] {
    display: none;
    margin: 0 20px; 
}

.dropdown-check-list label {
    color: #999;    
}

.dropdown-check-list input[type="checkbox"] + label span {
    background: url(../img/check_sheet.png) left -36px no-repeat;
    cursor: pointer;
    display: inline-block;    
    height: 20px;
    margin: 0 20px;
    vertical-align: middle;    
    width: 20px;
}

.dropdown-check-list input[type="checkbox"]:checked + label span {
    background: url(../img/check_sheet.png) left top no-repeat;
}

.dropdown-check-list .icon-info-sign {
    color: #999;
    line-height: 36px;  
}

.dropdown-check-list .other textarea {    
    display: block; 
    font-size: 14px;    
    margin: 25px auto 0;
    padding: 5px;
    width: -moz-calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    width: -o-calc(100% - 40px);
    width: calc(100% - 40px);   
}

.dropdown-check-list .checked {
    background-color: #acacac !important;
    padding-bottom: 30px;
}

.dropdown-check-list .checked label,
.dropdown-check-list .checked i {
    color: #fff;    
}

.dropdown-check-list .contactmessage {
    display: none;
}
</style>
</body>
</html>

This part of the script is what I use to close the dropdown when clicked outside. 脚本的这一部分是我在外部单击时用来关闭下拉菜单的部分。

checkList.on( "blur", function(){
    element.removeClass('visible');
});

The problem I have is that it also closes the dropdown when I try to write into the textarea. 我的问题是，当我尝试写入textarea时，它也关闭了下拉菜单。 How do I set this up so it doesn't close the dropdown when textarea is selected? 如何设置此项，以便在选择textarea时不会关闭下拉菜单？

Answer 1

A friend of mine helped me solve this, so I'll post it here for anyone who encounters the same problem. 我的一个朋友帮我解决了这个问题，因此我将在这里发布给遇到相同问题的任何人。

$(document).mouseup(function (e) {
    var container = $('.dropdown-check-list');

    if (!container.is(e.target) && container.has(e.target).length === 0) {
        container.removeClass('visible');
    }
});

Answer 2

Not sure to really understand. 不确定真的了解。 I made a few cleanups for testing and everything seems fine : http://jsfiddle.net/xp1fv43b/ 我进行了一些清理以进行测试，一切似乎都很好： http : //jsfiddle.net/xp1fv43b/

HTML : HTML：

<div id="list1" class="dropdown-check-list">
    <span class="anchor">-- Selecteer uw reparatie --</span>
    <ul class="items">
        <li class="item">
            <input id="dropdown-check-list-01" type="checkbox" />
            <label for="dropdown-check-list-01"><span></span>Option 1</label>
        </li>
        <li class="item">
            <input id="dropdown-check-list-02" type="checkbox" />
            <label for="dropdown-check-list-02"><span></span>Option 2</label>
        </li>
        <li class="item other">
            <input id="messagetick" type="checkbox" name="messagetick" />
            <label for="dropdown-check-list-03"><span></span>Other</label>
            <div class="contactmessage">
                <textarea name="setmessage" cols="25" rows="5"></textarea>
            </div>
        </li>
    </ul>                            
</div>

JS : JS：

$(document).ready(function(){
     $('input[name="messagetick"]').click(function() {
         $('.contactmessage').toggle(this.checked);
     });



    $('input[name="messagetick"]').change(function(){
        if($(this).is(":checked")) {
        $('li.other').addClass("checked");
       } else {
       $('li.other').removeClass("checked");
    }
   });
}

在下拉清单之外单击时如何关闭下拉清单，但在选择textarea时如何防止关闭它？

问题描述

2 个解决方案

解决方案1
1 2015-10-26 20:49:10

解决方案2
0 2015-10-26 15:41:33

在下拉清单之外单击时如何关闭下拉清单，但在选择textarea时如何防止关闭它？

问题描述

2 个解决方案

解决方案1 1 2015-10-26 20:49:10

解决方案2 0 2015-10-26 15:41:33

解决方案1
1 2015-10-26 20:49:10

解决方案2
0 2015-10-26 15:41:33