javascript - 自定义选择框，如果不是自定义选择框且其子项被点击则向上滑动

Question

我正在创建自定义选择框。我想要的是当不是自定义选择框(具有 selectbox_ui 类的元素)及其子项被单击时，然后 slideUp 否则如果自定义选择框(具有 selectbox_ui 类的元素)及其子项被单击，然后 slideDown。下面是我的代码片段，但遗憾的是，应该使选择框选项上下移动的功能无法正常工作。非常感谢任何帮助、建议、建议、线索和想法。谢谢!

$(document).ready(function () {
    $(".thehide").hide();
    $(".selectbox_ui").click(function (e) {
        var current_event = $(this);
        if ($(".selectbox_ui_dp", this).is(":visible")) {
            $(".selectbox_ui_dp", this).slideUp();
        } else {
            $(".selectbox_ui_dp", this).slideDown();
        }
        e.preventDefault();
    });
    $(document).on("click", function (e) {
        if ($(this).attr("class") !== "selectbox_ui") {
            $(".selectbox_ui_dp").slideUp();
        }
    });
});

.selectbox_ui {
    width: 100%;
    padding: 5px 0px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #cccccc;
    margin: 0px;
    font: normal 15px 'mplight', sans-serif;
    height: 30px;
    background: none;
}

    .selectbox_ui .selectbox_ui_label {
        color: #5a5a5a;
        font: normal 15px 'mpregular', sans-serif;
        padding: 0px;
        margin: 0px;
        position: absolute;
        text-transform: uppercase;
        width: 93%;
    }

        .selectbox_ui .selectbox_ui_label span {
            display: block;
        }

.selectbox_ui_dp {
    width: 94%;
    position: absolute;
    z-index: 9999;
    background: #fff;
    padding: 7px;
    margin: 0px;
    font: normal 15px 'mplight', sans-serif;
    text-decoration: none;
    list-style: none;
    -webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
}

    .selectbox_ui_dp li {
        text-decoration: none;
        clear: both;
        float: none;
        list-style: none;
    }

        .selectbox_ui_dp li a {
            font: normal 15px 'mplight', sans-serif;
            color: #5a5a5a;
            text-decoration: none;
            display: block;
        }

.dodong_ui .input_wrapper {
    margin: 5px 0px;
    display: block;
}

    .dodong_ui .input_wrapper label {
        color: #5a5a5a;
        font: normal 15px 'mpregular', sans-serif;
        padding: 0px;
        margin: 0px;
        position: absolute;
        text-transform: uppercase;
    }

    .dodong_ui .input_wrapper select {
        width: 100%;
        padding: 5px 0px;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #cccccc;
        margin: 0px;
        font: normal 15px 'mplight', sans-serif;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .dodong_ui .input_wrapper input, .dodong_ui .input_wrapper textarea {
        background: none;
        width: 100%;
        padding: 5px 0px;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #cccccc;
        margin: 0px;
        font: normal 15px 'mplight', sans-serif;
        height: 26px;
        overflow: hidden;
    }

        .dodong_ui .input_wrapper input:focus, .dodong_ui .input_wrapper input:active, .dodong_ui .input_wrapper input:hover, .dodong_ui .input_wrapper textarea:active, .dodong_ui .input_wrapper textarea:focus {
            outline: none;
        }

.dodong_ui button {
    display: table;
    margin: 0 auto;
    padding: 8px 11px 3px 11px;
    color: #fff;
    font: normal 'mpregular', sans-serif;
    text-transform: uppercase;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 3px solid #659d24;
    background: #76b729;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row daselect clear extend dodong_ui">
    <form class="ajaxform extend clear">
        <input type="hidden" name="ticket_sender" value="ebdul kerem muhemmed abubeker" />
        <fieldset>
            <div class="input_wrapper extend clear">
                <!-- <select class="extend clear" name="urgency" required="">
                                <option value="normal">Normal</option>
                                <option value="medium">Medium</option>
                                <option value="urgent">Urgent</option>
                            </select> -->
                <div class="extend clear selectbox_ui">
                    <div class="selectbox_ui_label extend clear"><span class="extend align_left">Urgency Level</span><span class="ion-ios-arrow-down align_right"></span></div>
                    <ul class=" thehide selectbox_ui_dp extend clear">
                        <li><a href="#">Normal</a></li>
                        <li><a href="#">Medium</a></li>
                        <li><a href="#">Urgent</a></li>
                    </ul>
                </div>
            </div>
            <div class="input_wrapper extend clear">
                <label class="extend clear">attachment</label>
                <input class="extend clear" type="text" class="extend clear attachment" value="" required />
            </div>
            <div class="input_wrapper extend clear">
                <label class="extend clear">Message</label>
                <textarea class="extend clear" name="message"></textarea>
            </div>
            <div class="input_wrapper extend clear">
                <button class="extend clear">Submit</button>
            </div>
        </fieldset>
    </form>
</div>

Answer 1

这是您需要的解决方案。您可以使用 stopPropagation 而不是 preventdefault。也可以使用 target 来查找 attr。

$(document).ready(function(){
  $(".thehide").hide();
$(".selectbox_ui").click(function(e){
            var current_event = $(this);
            if($(".selectbox_ui_dp", this).is(":visible")){
                $(".selectbox_ui_dp", this).slideUp();
            }else{
                $(".selectbox_ui_dp", this).slideDown();
            }
            e.stopPropagation();
        });
        $(document).on("click", function(e){
            if(!($(e.target).hasClass("selectbox_ui"))){
               $(".selectbox_ui_dp").slideUp();
            }
        });
});