I've modified the code on several places now and I've come up with the following solution: jsfiddle.net/u2158392/2g8poyxh/
It's working pretty well, but I'm looking for a way to close the other dropdown menus which are still open when I'm clicking on another one.
So how can I make sure only one dropdown menu can be activated on the page at all times?
Thanks in advance!
Related
I have two multi value react-select drodowns as part of a bigger filter component. The issue I am encountering is when you open one of the dropdowns, select one or more values and click outside of it, then the dropdown does not close.
If you click outside of the dropdown without selecting any value then it closes as expected. If you select a value and close the dropdown by clicking in the control and open it again, then it closes on outside click.
Code to reproduce the issue is here: https://codesandbox.io/s/nervous-wildflower-evmi0z
Does anyone have any idea why this is happening?
Because you use a library, and they didn't build you that feature to close the dropdown when you click outside.
In this case, you should customize the Dropdown component using css.
Read this question here may it help you:
react-select wont close when clicking outside
I'm in the final stages of my project/homework, and I came across a little problem. My homework was to create three dynamically generated drop-down menus; however the third menu is not updating based on the choices of the second menu, rather it is creating another menu. The second menu updates correctly based on the choices of the first menu. Can someone tell me what's wrong? There is a JSFiddle demo in the comments. Thank you all!
The problem is that you are not removing div with id="heroes" before you create another one. Your call to removeSiblings(x); does not remove div#heroes because div#heroes is not a sibling of select#myTeams. For div#heroes to be a sibling of select#myTeams you have to append it to div#teams instead of to div#stepOne. You would have to change line 108 of your fiddle:
document.getElementById('team').appendChild(heroDiv);
This will fix your issue with updating the third menu by selecting in the second, but you will have a similar issue with the form that renders when the user selects from the third menu.
I have a very complicated Javascript/JQuery Leaflet map. There is supposed to be a Leaflet control with a dropdown select box. The select box pulls it's content via AJAX. It pulls the content correctly and the generated HTML is fine and can be seen. If I use the keyboard to highlight the select menu, I can use the arrow keys to change the value. However, I can't click on the select menu and see the drop down box. The click is being captured fine(checked with JQuery .click()).
I can't share the specific code because I'm not sure what's wrong and I can't share the whole thing because of security issues. So, my question is a little more general:
What kinds of errors/bugs should I be looking for if a select dropdown menu is not showing on click? What are various things I can check to see what is wrong?
Thanks.
Nevermind - known issue with Leaflet. Custom Control not working
I am very new to JS and I would like to create a drop down when an image is clicked on. When it is clicked on the drop down should slide down to show some extra information and should stay down and keep the information displayed, then when another one of these tags are clicked that one that is down should slide back and the new one down.
Could you please tell me how to do this or give me some tutorial to do?
Thanks so much!
Here is an example: http://twitter.github.com/bootstrap/javascript.html#collapse
What you're looking for is called an accordion. Here is a fine tutorial I found that uses jQuery:
http://tutorialzine.com/2009/12/colorful-content-accordion-css-jquery/
I'm having trouble with my dropdowns after upgrading to Bootstrap 2.1.1.
The very first dropdown on my page works fine. Opens correctly when clicked on, then closes when clicking on either an item, the dropdown header or the page.
However, the second and third dropdowns (I'm guessing any dropdown other than the first) on my page don't work correctly.
They don't close when clicking on an item, page or their header.
I looked around for a bit and found the following snippet, which I didn't need before:
$('.dropdown-toggle').dropdown();
When I include this in my code, the second/third dropdowns do close when clicking on the page or on an item. They still don't work when clicking on their header.
The HTML for these dropdowns is exactly the same as the HTML for the first one. I can't find any differences, nor an explanation why only the first dropdown works correctly.
I have put some code on JSfiddle here: http://jsfiddle.net/3CysL/1/
You are linking dropdown triggers with their parent, the dropdown container.
This is breaking your triggers, so change:
href="#media" -> href="#"
href="#tools" -> href="#"
href="#language" -> href="#"