title: Using javascript to close a foundation 4 dropdown button menu window
body: <p>I am struggling with a JavaScript / jQuery issue. I am developing with foundation 4. I have a group of 5 buttons. Two of the buttons are <a href="http://foundation.zurb.com/docs/components/dropdown-buttons.html" rel="nofollow">dropdown buttons</a>. When the dropdown button is pressed a window is presented with the dropdown options(links).</p>
  
  <pre><code>&lt;a id="products" href="#" data-dropdown="prod" class="not_active_button_dropdown"&gt;Dropdown Button&lt;/a&gt;&lt;br&gt;
  
  &lt;ul id="prod" class="f-dropdown"&gt;
  &lt;li&gt;&lt;a class="prod" href="index.php?info=basic"&gt;Basic&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="prod" href="index.php?info=unifrost"&gt;Unifrost&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="prod" href="index.php?info=teal"&gt;Teal-Sorb&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Note: I created my own buttons classes with sass by mixin (<code>class="not_active_button_dropdown"</code>). </p>
  
  <p>Now I developed a script that loads the php response into a div <code>#dropdownwrap</code>, changes the buttons so it highlights the current button that has been pressed. </p>
  
  <pre><code>&lt;script style="text/javascript"&gt;
  $(document).on('click','a.not_active_button, a.prod', function(){
  
  var href=$(this).attr('href');
  var querystring=href.slice(href.indexOf('?')+1);
  
  //get 
  $.get('index_jq.php', querystring, processResponse).error(errorResponse);
  
  //reset all buttons to not active
  //normal button
  $('a.active_button').removeClass("active_button").addClass("not_active_button");
  //dropdown button
  $('a.active_button_dropdown').removeClass("active_button_dropdown").addClass("not_active_button_dropdown");
  
  
  //if it is a normal button make it active
  if ($(this).hasClass("not_active_button")) 
  {
  $(this).addClass("active_button");
  }
  
  
  //if it is a dropdown button option link make it active 
  if ($(this).hasClass("prod")) 
  {
  $('#products').removeClass("not_active_button_dropdown").addClass("active_button_dropdown");
  //$('ul#prod.f-dropdown').close();
  }
  
  //slide down wrap
  if ($('.dropdownwrap').is(":hidden")) {
        $('.dropdownwrap').slideDown();
      } else {
        $('.dropdownwrap').slideToggle("slow");
        $('.dropdownwrap').slideDown("slow");
      }
  
  
  
  return false; // stop the link
  
  });
  
  
  
  function processResponse(data) {
  
   $('.dropdownwrap').html(data);
  
   }
  
  function errorResponse() {
  var errorMsg = "Your request could not be processed right now.";
  errorMsg += "Please try again.";
  $('.dropdownwrap').html(errorMsg);
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I am not that experienced with JavaScript or jQuery. Anyhow the problem is the following:</p>
  
  <pre><code>//$('ul#prod.f-dropdown').close();
  </code></pre>
  
  <p>which is commented out above. Everything works fine, my data loads and the dropdown button highlights. The problem is that the foundation 4 dropdown button window does not close after the script executes. This is because (I am guessing) I return false to stop the link from executing. So I tried to close the window using the above commented out line. When I uncomment the line, the window closes but the return false does not execute, that is the link is not disabled, it goes to the link, i. e. <code>index.php?info=basic</code>. So it seems when I add the close window statement, return false does not work. I tried adding the line after return false, but it does not close the dropdown menu.</p>