Why dropdown menu not working in multiple tables jQuery

Question

i working with dropdown menu.

But this dropdown is not working in multiple tables, i try to solve this issues but i didn't found solution.

Code:

$(document).ready(function () {
    document.querySelector('.custom-style').onclick = ({
        target
    }) => {
        if (!target.classList.contains('more')) return
        document.querySelectorAll('.dropout.active').forEach(
            (d) => d !== target.parentElement && d.classList.remove('active')
        )
        target.parentElement.classList.toggle('active');
    }
});

JSFiddle - link

So as u can see in first table dropdown is working,but in seccond table no, i try few methods to fix this, but no result.

s.kuznetsov · Accepted Answer

You need the each() method. I redid your code.

$(document).ready(function () {  
   Array.from(document.querySelectorAll('.custom-style')).forEach(function(menu_side) {
    menu_side.onclick = ({
        target
    }) => {
        if (!target.classList.contains('more')) return
        document.querySelectorAll('.dropout.active').forEach(
            (d) => d !== target.parentElement && d.classList.remove('active')
        )
        target.parentElement.classList.toggle('active');
    }
    
  });   
});

.more {
    cursor: pointer;
    border: none;
    background: transparent;
    display: block;
    margin-top: auto;
    margin-bottom: auto;
}

    .more span {
        display: block;
        width: .30rem;
        height: .30rem;
        background: #363636;
        border-radius: 50%;
        pointer-events: none;
    }

        .more span:not(:last-child) {
            margin-bottom: .125rem;
        }

.dropout {
    display: block;
    margin-top: auto;
    margin-bottom: auto;
    float: right;
}

    .dropout ul {
        position: absolute;
        top: auto;
        right: 2rem;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.12s ease;
        color: #fff;
        background: rgba(33, 33, 33, 0.85);
        border-radius: 10px;
        padding: 20px 20px 20px 20px;
        list-style-type: none;
    }

        .dropout input {
            background: none;
            border: none;
        }

    .dropout btns {
        background: none;
        border: none;
    }

        .dropout.active ul {
            transform: scaleX(1);
        }

.btns {
    display: inline-block;
    position: relative;
    width: 120px;
    height: 32px;
    line-height: 32px;
    border-radius: 2px;
    font-size: 0.9em;
    background-color: #fff;
    color: #646464;
    margin: 5px;
}

    .btns > paper-ripple {
        border-radius: 2px;
        overflow: hidden;
    }

    .btns.narrow {
        width: 60px;
    }

    .btns.grey {
        background-color: #eee;
    }

    .btns.blue {
        background-color: #4285f4;
        color: #fff;
    }

    .btns.green {
        background-color: #0f9d58;
        color: #fff;
    }

    .btns.red {
        background-color: #cb3a3a;
        color: #fff;
    }

    .btns.light-blue {
        background-color: lightblue;
        color: #fff;
    }

    .btns.darkcyan {
        background-color: darkcyan;
        color: #fff;
    }

    .btns.raised {
        transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        transition-delay: 0.2s;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    }

        .btns.raised:active {
            box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
            transition-delay: 0s;
        }

.centered-text {
    text-align: center;
}

Why dropdown menu not working in multiple tables jQuery

Answers (1)

Related Questions