Question

我使用jQuery和CSS创建了一个自定义下拉菜单，一切正常。

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

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

选择某个选项后，我会更改下拉菜单background:及其color:并向其添加checked icon，以便用户可以看到他们已选择了某些内容。 ..

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

为了更好地解释这一点，我创建了这个有效的FIDDLE：

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

如果单击下拉菜单，则可以选择不同的选项，然后可以再次取消选择它们。

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

如果你理解，请帮助我

Answer 1

使用.parent()统计<p>所有added，如果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>

jquery：创建自定义下拉菜单？

1 个答案: