fixed click on submenu

thiagodnf · Jul 11, 2021 · 6c6d83b · 6c6d83b
1 parent 7422da7
commit 6c6d83b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 31 deletions.
diff --git a/index.html b/index.html
@@ -48,7 +48,7 @@
                                 <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#modal-import-csv"><i class="fa fa-upload"></i><span>Import .CSV</span></a></li>
                                 <li><hr class="dropdown-divider"></li>
                                 <li>
-                                    <a class="dropdown-item" href="#"><i class="fa fa-blank"></i><span>Export</span><i class="fa fa-chevron-right float-end mt-1"></i></a>
+                                    <a class="dropdown-item dropdown-item-no-click" href="#"><i class="fa fa-blank"></i><span>Export</span><i class="fa fa-chevron-right float-end mt-1"></i></a>
                                     <ul class="submenu dropdown-menu">
                                         <li><a class="dropdown-item" href="#" id="menubar-export-canvas"><i class="fa fa-blank"></i><span>Canvas</span></a></li>
                                         <li><a class="dropdown-item" href="#" id="menubar-export-positions"><i class="fa fa-blank"></i><span>Positions</span></a></li>
@@ -88,7 +88,7 @@
                                 <li><a class="dropdown-item" id="menubar-insert-squares" href="#"><i class="far fa-square"></i><span>Squares</span></a></li>
                                 <li><hr class="dropdown-divider"></li>
                                 <li>
-                                    <a class="dropdown-item" href="#"><i class="fa fa-blank"></i><span>Examples</span><i class="fa fa-chevron-right float-end mt-1"></i></a>
+                                    <a class="dropdown-item dropdown-item-no-click" href="#"><i class="fa fa-blank"></i><span>Examples</span><i class="fa fa-chevron-right float-end mt-1"></i></a>
                                     <ul class="submenu dropdown-menu">
                                         <li><a class="dropdown-item examples" data-file="dj30.csv" href="#"><i class="fa fa-blank"></i><span>dj30.csv</span></a></li>
                                         <li><a class="dropdown-item examples" data-file="oliver55.csv" href="#"><i class="fa fa-blank"></i><span>oliver55.csv</span></a></li>

diff --git a/js/script.js b/js/script.js
@@ -52,40 +52,45 @@ $(function () {
         return false;
     }
 
-    document.addEventListener("DOMContentLoaded", function(){
+    $(".dropdown-item-no-click").click((event) =>{
+        event.preventDefault();
+        return false;
+    })
+    document.addEventListener("DOMContentLoaded", function () {
+
         // make it as accordion for smaller screens
         if (window.innerWidth < 992) {
 
-          // close all inner dropdowns when parent is closed
-          document.querySelectorAll('.navbar .dropdown').forEach(function(everydropdown){
-            everydropdown.addEventListener('hidden.bs.dropdown', function () {
-              // after dropdown is hidden, then find all submenus
-                this.querySelectorAll('.submenu').forEach(function(everysubmenu){
-                  // hide every submenu as well
-                  everysubmenu.style.display = 'none';
+            // close all inner dropdowns when parent is closed
+            document.querySelectorAll('.navbar .dropdown').forEach(function (everydropdown) {
+                everydropdown.addEventListener('hidden.bs.dropdown', function () {
+                    // after dropdown is hidden, then find all submenus
+                    this.querySelectorAll('.submenu').forEach(function (everysubmenu) {
+                        // hide every submenu as well
+                        everysubmenu.style.display = 'none';
+                    });
+                })
+            });
+
+            document.querySelectorAll('.dropdown-menu a').forEach(function (element) {
+                element.addEventListener('click', function (e) {
+
+                    let nextEl = this.nextElementSibling;
+
+                    if (nextEl && nextEl.classList.contains('submenu')) {
+                        // prevent opening link if link needs to open dropdown
+                        e.preventDefault();
+                        if (nextEl.style.display == 'block') {
+                            nextEl.style.display = 'none';
+                        } else {
+                            nextEl.style.display = 'block';
+                        }
+
+                    }
                 });
             })
-          });
-
-          document.querySelectorAll('.dropdown-menu a').forEach(function(element){
-            element.addEventListener('click', function (e) {
-                let nextEl = this.nextElementSibling;
-                if(nextEl && nextEl.classList.contains('submenu')) {
-                  // prevent opening link if link needs to open dropdown
-                  e.preventDefault();
-                  if(nextEl.style.display == 'block'){
-                    nextEl.style.display = 'none';
-                  } else {
-                    nextEl.style.display = 'block';
-                  }
-
-                }
-            });
-          })
-        }
-        // end if innerWidth
-        });
-        // DOMContentLoaded  end
+        } // end if innerWidth
+    });// DOMContentLoaded  end