fix(component): megamenu

open one collapse closes others
Orange-OpenSource · Feb 14, 2017 · 249088f · 249088f
1 parent 90ba25a
commit 249088f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/docs-orange/examples/orange-news/index.html b/docs-orange/examples/orange-news/index.html
@@ -157,7 +157,18 @@
                                 </div>
                             </div>
                         </li>
-                        <li class="nav-item"><a class="nav-link collapsed" href="" data-toggle="collapse">Discover</a></li>
+                        <li class="nav-item">
+                          <a class="nav-link collapsed" href="#mega_level_2_collapse" data-toggle="collapse">Discover</a>
+                            <div class="mega-menu-panel collapse" id="mega_level_2_collapse">
+                                <div class="container">
+                                    <ul class="navbar-nav">
+                                        <li class="nav-item">
+                                            <a class="nav-link" href="">Test 1</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
                         <li class="nav-item"><a class="nav-link collapsed" href="" data-toggle="collapse">My Orange</a></li>
                     </ul>
                 </div>

diff --git a/js/src/o-megamenu.js b/js/src/o-megamenu.js
@@ -66,6 +66,7 @@ const MegaMenu = (($) => {
       this._$goForwardLinks = $(this._element).find(Selector.MEGAMENU_NAV).prev(Selector.NAV_LINK)
       this._$goBackLinks = $(this._element).find(Selector.NAV_LINK_BACK)
       this._$topCollapseMenus = $(this._element).find(Selector.MEGAMENU_PANEL)
+      this._$navLinkCollapses = $(this._element).find(Selector.NAV_LINK_COLLAPSE)
       this._addEventListeners()
       this._addAriaAttributes(this._element)
     }
@@ -85,6 +86,7 @@ const MegaMenu = (($) => {
       this._$goBackLinks.on('click', (event) => this._goBackward(event))
       this._$navLinks.on('keydown', (event) => this._manageKeyDown(event))
       this._$topCollapseMenus.on('shown.bs.collapse', this._collapseFocus)
+      this._$navLinkCollapses.on('click', (event) => this._handleCollapseToggle(event))
     }
 
     _addAriaAttributes(element) {
@@ -148,6 +150,13 @@ const MegaMenu = (($) => {
       $(this).find(Selector.NAV_LINK).not(Selector.NAV_LINK_BACK).first().trigger('focus')
     }
 
+    _handleCollapseToggle(e){
+      const $this = $(e.target)
+      const $thisCollapse = $($this.attr('href'))
+
+      this._$topCollapseMenus.not($thisCollapse).collapse('hide')
+    }
+
     _goForward(e) {
       e.preventDefault();
       const $this = $(e.target)