]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 999d7a9)
Merge pull request #9622 from zurb/responsive-toggle-targeting-bug
authorKevin Ball <kmball11@gmail.com>
Thu, 2 Feb 2017 21:06:16 +0000 (13:06 -0800)
committerKevin Ball <kmball11@gmail.com>
Thu, 2 Feb 2017 21:13:51 +0000 (13:13 -0800)
Fix responsive toggle to pay attention to targets of internal toggles

js/foundation.responsiveToggle.js patch | blob | blame | history
test/visual/responsive-toggle/responsive-toggle.html [new file with mode: 0644] patch | blob

diff --git a/js/foundation.responsiveToggle.js b/js/foundation.responsiveToggle.js
index 8f107e1d4b8ef547d47471eae8189f0d4afc89cb..6cb36085671caaa53b5611cd61a65c648ef69b07 100644 (file)
--- a/js/foundation.responsiveToggle.js
+++ b/js/foundation.responsiveToggle.js
@@ -38,7 +38,10 @@ class ResponsiveToggle {
     }
 
     this.$targetMenu = $(`#${targetID}`);
-    this.$toggler = this.$element.find('[data-toggle]');
+    this.$toggler = this.$element.find('[data-toggle]').filter(function() {
+      var target = $(this).data('toggle');
+      return (target === targetID || target === "");
+    });
     this.options = $.extend({}, this.options, this.$targetMenu.data());
 
     // If they were set, parse the animation classes
diff --git a/test/visual/responsive-toggle/responsive-toggle.html b/test/visual/responsive-toggle/responsive-toggle.html
new file mode 100644 (file)
index 0000000..1ec17a9
--- /dev/null
+++ b/test/visual/responsive-toggle/responsive-toggle.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+
+<head>
+  <link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link href="../assets/css/foundation.css" rel="stylesheet" />
+</head>
+
+<body>
+  <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="xxxlarge">
+  <button class="menu-icon" type="button" data-toggle="example-menu"></button>
+  <div class="title-bar-title">Menu</div>
+  <button class="button" type="button" data-toggle="example-dropdown2">Dropdown</button>
+
+  <div class="dropdown-pane bottom" id="example-dropdown2" data-dropdown>
+    <p>Just some junk that needs to be said. Or not. Your choice.</p>
+  </div>
+  <button class="menu-icon" type="button" data-toggle></button>
+</div>
+
+<div class="top-bar" id="example-menu">
+  <div class="top-bar-left">
+    <ul class="dropdown menu" data-dropdown-menu>
+      <li class="menu-text">Site Title</li>
+      <li>
+        <a href="#">One</a>
+        <ul class="menu vertical">
+          <li><a href="#">One</a></li>
+          <li><a href="#">Two</a></li>
+          <li><a href="#">Three</a></li>
+        </ul>
+      </li>
+      <li><a href="#">Two</a></li>
+      <li><a href="#">Three</a></li>
+    </ul>
+  </div>
+  <div class="top-bar-right">
+    <ul class="menu">
+      <li><input type="search" placeholder="Search"></li>
+      <li><button type="button" class="button">Search</button></li>
+    </ul>
+  </div>
+</div>
+  <p>Dropdown button should only show dropdown, menu buttons should only show menu</p>
+  <script src="../assets/js/vendor.js"></script>
+  <script src="../assets/js/foundation.js"></script>
+  <script>
+    $(document).foundation();
+  </script>
+</body>
+</html>
Mirror of https://github.com/foundation/foundation-sites.git