JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="nav">
  <div class="con">
    <a class="foo" href="#">foo</a>
    <div class="dd-box dd-foo-box">
      <ul class="dd-box-list">
        <li><a href="https://www.reddit.com" target="_blank">reddit</a></li>
        <li><a href="https://www.google.com" target="_blank">google</a></li>
      </ul>
    </div>
    <a class="boo" href="#">boo</a>
    <div class="dd-box dd-boo-box">
      <ul class="dd-box-list">
        <li><a href="https://www.stackoverflow.com" target="_blank">stackoverflow</a></li>
        <li><a href="https://www.thenextweb.com" target="_blank">thenextweb</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="summary">
  <p>
    I'm opeing the dropdown boxes using the 'FOO', 'BOO' items in the navigation bar and I'm closing them when a click event occurs outside using the following code which is working fine.
  </p>

  <pre>
$(document).on('click', '.dd-box', function() {
  return false
});
</pre>

  <p>
    The problem that I'm experiencing is that this is also stopping the links within the dropdown boxes from being visted.
    <br />
    <br />
    I'm trying to avoid using hacks like window.open to force the link from being visited, any ideas?
  </p>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
body {
  padding: 0;
  margin: 0;
  background-color: #fafafa;
}

.nav {
  height: 50px;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #ddd;
}

.con {
  width: 95px;
  position: absolute;
  right: 40px;
}

.con a {
  line-height: 50px;
  text-decoration: none;
  color: #333;
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
}

.con a:nth-child(3) {
  margin-left: 20px;
}

.dd-foo-box {
  position: absolute;
  right: 60px;
  top: 42px;
  width: 200px;
  height: 200px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  display: none;
}

.dd-boo-box {
  position: absolute;
  right: 0px;
  top: 42px;
  width: 200px;
  height: 200px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  display: none;
}

ul.dd-box-list {
  padding: 0 1em;
  margin: 0;
}

ul.dd-box-list li {
  list-style-type: none;
}

a.links {
  font-family: 'Open Sans', sans-serif;
}

div.summary {
  padding: 1em;
  font-family: 'Open Sans', sans-serif;
}

pre {
  font-size: 14px;
  font-weight: normal;
  font-family: "Courier New", Courier, mono;
  background-color: #f0f0f0;
  border: 1px solid #e1e1e8;
  border-radius: 3px;
  color: #444;
  padding: .5em;
  line-height: normal width: 100%;
  overflow: auto;
}

JavaScript

$(document).ready(function() {

	// this resolves the issue
	$("a").click(function(e) {
    e.stopPropagation();
  });

  $('a.foo').click(function() {
    $('.dd-boo-box').hide();
    $(this).next().toggle();

    return false;
  });

  $('a.boo').click(function() {
    $('.dd-foo-box').hide();
    $(this).next().toggle();

    return false;
  });

});

$(document).on('click', function() {
  clsAllDBox();
});

function clsAllDBox() {
  $('.dd-boo-box').hide();
  $('.dd-foo-box').hide();
}

$(document).on('click', '.dd-box', function() {
  /*
	  Note: don't forget to run the code again after making changes.
  	Comment out the return statement below and the links will start working.
  */
  return false
});