jquery: creating a custom dropdown menu?

Question

I have created a custom drop-down menu using jQuery and CSS and it all works fine.

However, I have one issue that I cannot find a solution for.

Currently, I can select the Options (Option 1, Option 2, etc...) and I can also, de-select them by clicking on my selection.

When an option is selected, I change the drop-down menu background: and its color: and I add a checked icon to it so the user can see that they have selected something...

However, because I allow the users to de-select their options, I need to be able to change the background: and the color: and remove the checked icon IF there are no selections under that particular dropdown.

To explain this better, I have created this working FIDDLE:

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

If you click on the drop-down menus, you can select different options and then you can de-select them again.

I need the drop-down menu to go back it's original background color etc if there are no selections made.

Do help me if you understand

So do it homes! When you unselect something, count how many children of the parent are selected. If 0, revert the changes to the parent. — Taplar
– Taplar, Commented Dec 8, 2017 at 23:10
@Taplar, I have the same elements with the same class names all over my page. I can't count them like that. — David Hope
– David Hope, Commented Dec 8, 2017 at 23:11
You don't count them all over the page. You count the ones inside the parent related to the one you unchecked. Just like you are conditionally applying a change to only the parent of the elements when checked. You conditionally apply your count logic to that parents children — Taplar
– Taplar, Commented Dec 8, 2017 at 23:12
that is what i meant. All the parents and their children have the same class names. I don't get how I can select just 1 of the parents and differentiate them. — David Hope
– David Hope, Commented Dec 8, 2017 at 23:14
Because only one element is being handled in that event. That one element has one parent. $(this).closest('.buildExMain') . You have to think about your lookups contextually, not globally. — Taplar
– Taplar, Commented Dec 8, 2017 at 23:15

Junius L · Accepted Answer · 2017-12-09 00:37:02Z

Using .parent() count all the <p> with the class added, if the length is greater than zero add the green background else remove the background.

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>

Collectives™ on Stack Overflow

jquery: creating a custom dropdown menu?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related