search

shakrmedia / petal

A modern, light CSS UI framework by Shakr
https://shakrmedia.github.io/petal
MIT License
128 stars 9 forks source link

Dropdown menu not closing #26

Open webcliq opened 3 years ago

webcliq commented 3 years ago

I am in the process of building a new site from scratch with Petal for the first time. I am at the wireframe / design stage. I am trying to create a menu bar out of buttons (extra vote for Nav component please).

When I click on the "caret" to instantiate the dropdown, there are no problems and the list appears but when I click on the "caret" again to hide the menu, it does not hide and the JS console displays an error:

Uncaught TypeError: can't access property "parentNode", dropdown_el is null

I have examined the source of your buttons in your Documentation and my code is a copy of that:

`

` I have tried a few ideas (see in my code), but to no avail. I could dive into your JS and probably fix it, but I am a bit confused why it works in your documentation but does not work on my system. ![screenshot-treetest test-2020 12 08-15_51_50](https://user-images.githubusercontent.com/1401189/101500864-524f1680-396f-11eb-98a1-ba9a815c15ad.png)
zvuc commented 3 years ago

It looks like you forgot to add the .dropdown class to the <button>. As laid out in the documentation, the .dropdown class and data-toggle="dropdown" attributes are both required for the closing to properly work. Can you try again and see how it goes?