I'm currently facing a challenge in setting up a submenu for my Bootstrap navigation.
To demonstrate the issue, I have prepared a jsfiddle at this link: http://jsfiddle.net/ho6ggmge/
It's worth mentioning that this was my first time using JSfiddle, so I took all the CSS and JS code and placed it directly within the sections there as I wasn't certain how to include bootstrap files as resources.
In terms of Javascript, any modifications made are located at the end of the code. The remaining code is untouched bootstrap.js.
Regarding the CSS, I made significant adjustments to the bootstrap.css file which might make it harder to navigate. If you require assistance locating specific parts of the CSS, please let me know. The CSS responsible for the submenu can be found towards the bottom of the code.
The problem arises when I attempt to click on a link that should reveal a submenu (specifically "Job Info > Signoffs"), causing the entire dropdown to close. Inspecting the element reveals that the .open class is added to the Signoffs link but removed from the Job Info link. Both links need to remain open simultaneously.
The inspiration for my work was derived from this reference: http://www.bootply.com/97919, and my goal is to achieve similar functionality.
Your assistance on this matter is greatly appreciated!
EDIT: I noticed that removing the following code snippet results in the complete malfunctioning of the dropdown:
$(document).ready(function(){
$('.dropdown-toggle').dropdown()
});