jQuery:创建自定义下拉菜单

Question

我已经使用jQuery和css创建了一个自定义下拉菜单，而且一切都很好。

但是，我有一个问题，我找不到解决方案。

目前，我可以选择选项(Option 1, Option 2, etc...)，也可以通过单击我的选择来de-select。

选择选项时，我更改下拉菜单background:及其color:，然后向其添加checked icon，以便用户可以看到他们选择了一些东西...

但是，由于我允许用户de-select他们的选项，因此我需要能够更改background:和color:并删除checked icon，如果该特定下拉列表没有选择。

为了更好地解释这一点，我创建了这个工作小提琴：

https://jsfiddle.net/okmpxkcu/3/

如果您单击下拉菜单，则可以选择其他选项，然后可以再次选择它们。

如果没有选择，我需要下拉菜单才能返回其原始背景颜色等。

如果您了解

Answer 1

使用.parent（）与类added计数所有CC_11，如果length大于零，则添加绿色背景，请删除背景。

var cou = 0;
var myI = 0;
var videoSource = [];
$("div.buildExMain").find('i.fa').hide();
$(document).on('click', '.buildExMain', function(e) {
    $('.buildExDrop').hide();
    $(this).children('.buildExDrop').show();
});
$(document).on('click', '.pSelection', function(e) {
    //        console.log($(this).parent().children());
    var vidToAdd = $(this).attr("data-id");
    ///check if its added/////
    if ($(this).hasClass("added")) {
        $(this).removeClass("added");
        $('.fa-check:last-child', this).remove();
        $('.buildExDrop').hide();
        e.stopPropagation();
        videoSource = videoSource.filter(x => x != vidToAdd);
        console.log(videoSource);
    } else {
        $('.exHolder').addClass('buildExMain');
        $(this).addClass('added');
        $(this).append('<i class="fa fa-check" aria-hidden="true"></i>');
        videoSource.push(vidToAdd);
        var videoCount = videoSource.length;
        console.log(videoSource);
        if ($(this).hasClass("exc")) {
            cou++;
        }
        e.stopPropagation();
        $('.buildExDrop').hide();
    }
    // check if p tags with added class exists
    if ($(this).parent().find('p.pSelection.exc.added').length > 0) {
        $(this).closest("div.buildExMain").find('i.fa').show();
        $(this).closest('.buildExMain').addClass('selected');
    } else {
        $(this).closest("div.buildExMain").find('i.fa').hide();
        $(this).closest('.buildExMain').removeClass('selected');
    }
});

.exHolder {
    width: 100%;
    color: #e91e62;
    border: solid 1px #e91e62;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #fff;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 20px;
    position: relative;
    display: inline-block;
}
.buildExDrop {
    background: green;
    width: 100%;
    height: auto;
    border: solid 1px #e91e62;
    font-family: 'Raleway';
    color: #fff;
    display: none;
    position: absolute;
    left: 0;
    z-index: 1;
    border-radius: 4px;
}
.pSelection {
    position: relative;
    border-bottom: solid 1px #000;
}
.pSelection:hover {
    background-color: #ccc;
    cursor: pointer;
}
.fa-check-circle {
    position: absolute;
    right: 20px;
    font-size: 24px;
    top: 4px;
    display: none;
}
.fa-check {
    position: absolute;
    right: 20px;
    font-size: 24px;
    top: 0px;
    display: none;
}
.selected {
    background-color: green;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="exHolder buildExMain"><span>Select Options</span><i class="fa fa-check-circle" aria-hidden="true"></i>
    <div class="buildExDrop">
        <p class="pSelection exc" data-id="1">Option 1 </p>
        <p class="pSelection exc" data-id="2">Option 2 </p>
        <p class="pSelection exc" data-id="3">Option 3 </p>
        <p class="pSelection exc" data-id="4">Option 4 </p>
    </div>
</div>
<div class="exHolder buildExMain"><span>Select Options</span><i class="fa fa-check-circle" aria-hidden="true"></i>
    <div class="buildExDrop">
        <p class="pSelection exc" data-id="1">Option 1 </p>
        <p class="pSelection exc" data-id="2">Option 2 </p>
        <p class="pSelection exc" data-id="3">Option 3 </p>
        <p class="pSelection exc" data-id="4">Option 4 </p>
    </div>
</div>