Why not all added items will open dropdown menu

Why not all added items will open dropdown menu
0.0 0

#1

The first added item will open the dropdown menu when user clicks on three bullits, The problem begins when you add more then one item to that list. Not all the dropdown meny will be shown in this case and it is right that only one dropdown will show each time (accordion).

        function toggleOptionButton() {
            var itemClass = this.nextElementSibling.className;
            console.log(itemClass);

            for(var i = 0; i < option.length; i++) {
                option[i].className = 'option closeOption'; 
            }
            if(itemClass === 'option closeOption') {
                this.nextElementSibling.className = 'option openOption';
                console.log(itemClass);
            }
        }

In order to give you a clear picture of the entire code —> https://codepen.io/chichichi/pen/rpYNqe?editors=0111

You should look between line 48 and 58.


#2

I believe I understand what you are asking now. Let’s say I add three different items (‘first’, ‘second’ and ‘third’) using the Add button. I end up with the following:

image

I assume you want to know why your code displays the following to the console.

“option closeOption”
“option closeOption”
“option closeOption”

The reason it does this is because in your addToList function, you have:

        let optionButton = [].slice.call(document.querySelectorAll(".threeBullits"));

and then two lines later you have:

        optionButton.forEach(function(element, index) {
            optionButton[index].addEventListener('click', toggleOptionButton, false);
        }); 

Using the example of adding the three items (‘first’, ‘second’ and ‘third’), when the ‘first’ item is added, optionButton only has 1 element, so your forEach adds a ‘click’ event listener to the ‘first’ threeBullets. When the ‘second’ item is added, optionButton has 2 elements, so your forEach adds another (2nd) ‘click’ event listener to the ‘first’ threeBullets and a ‘click’ event listener to the ‘second’ threeBullets. When the ‘third’ item is added, optionButton has 3 elements, so your forEach adds another (3nd) ‘click’ event listener to the ‘first’ threeBullets, another (2nd) ‘click’ event listener to the ‘second’ threeBullets, and a ‘click’ event listener to the ‘third’ threeBullets.

After those three items have been, when the ‘first’ threeBullets is clicked, it has 3 ‘click’ events on it, so it will execute toggleOptionButton 3 times.

Lesson Learned: You should not being adding the ‘click’ events to each threeBullets every time a new item is added.


#3

Meny --? Menu. But if I add two or more items to this list. Not all dropdown menu will display…


#4

So using a for-loop would be a better solution?


#5

It would result in the same issue. You need to rethink when you should be adding a ‘click’ event.


#6

Found the answer after experimenting with some codes.

I assign the element to the parent id and from there bubbling to the right event.target. Which in case bind one eventlistener each time when click event has been fired on the button.


#7

Glad you figured it out.


#8

Yes, thanks for helping me out. Learned some important thing about bubbling and disadvantage of using a forEach loop to bind click eventlisteners.