Question

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

＆＃13;

$(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();
        }
    });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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();
            }
        });
});

自定义选择框，如果不是自定义选择框，则单击滑动，并单击其子项

1 个答案: