twitter bootstrap dropdown doesn't toggle closed when it should

Brand

• Sample
  • One
  • Two
  • Three
  • Four
  • Five
• Stuff
• Things
• Nothing

live here: http://www.joshlevent.com/dropdownbug/

Answer by merv for twitter bootstrap dropdown doesn't toggle closed when it should

iframes don't propagate click events up to their parents by default. You need to add code to do that manually. In addition to being able to edit the content of the iframe you are loading, cross-domain restrictions will require you to be loading the iframe content from the same domain as your page.

This would need to run from within the iframe page:

$('html').on('click', function () {    parent.$('#frame').trigger('click');  });  

where #frame is the id of your iframe. You could delegate the click to anything in the parent (e.g., 'body') and that would work as well. Depends on how tightly you want to couple the content in the iframe to the page.

So, that should take care of the page closing the menu.

Important Update

As for clicking on the menu items to close the menu, apparently there was a bug[?] in the lastest update (2.0.4 > 2.1.0): Dropdown menus don't get closed when selecting an option. A selector was changed from '.dropdown form' to '.dropdown', so now what was once a celebrated feature to make working with dropdowns in forms easier has evolved into a callback that blocks all clicks on dropdown menu items.

An interim solution is to include the following code until the bug is fixed (2.1.1):

$('body')    .off('click.dropdown touchstart.dropdown.data-api', '.dropdown')    .on('click.dropdown touchstart.dropdown.data-api'      , '.dropdown form'      , function (e) { e.stopPropagation() })  

Answer by Josh for twitter bootstrap dropdown doesn't toggle closed when it should

This is the full solution I implemented based on merv's great answer. If there is a better way for me to post the solution for those coming in the future please let me know.

This jquery was added to the bottom of the html of the pages in the frame:

$('html').on('click', function () {    parent.$('#frame').trigger('click');  });  

The dropdown was switched to a button and restyled to fit into the navbar. In the html:

                
                                                                          Sample                                                  

In the CSS:

        #samplebtn {          position:absolute;          top: 0;          margin: 0px;          padding: 0px;          border: 0px;          }          #samplebtn .btn {              border: 0px;          }  

full code of solution (update of the full code in the question - this is the outside frame only):

                                                                                                    
              
                  
                                               Brand                                            
                            
                                                                                                  Sample                                                                                              
                                  
                                      One                                  
                                  
                                      Two                                  
                                  
                                      Three                                  
                                  
                                      Four                                                                                                                  
                                  
                                      Five                                                                                                                  
                              
                          
                          
                                                                Stuff
                          
                                                                Things
                          
                                                                Nothing
                      
                  
              
          
          
                                      
                                                    

for complete reference, this is the code of a page inside the frame:

                                                                                                          
                        
          
                      
Project Description
                      
Lorem Ipsum Dolor Sit Amet