Saving a value from a function in a Global Variable in jQuery

0

With a problem with the development of a simple dropdown , I am not able to get the value of a function to pass to the others, the values I am wanting are $target and dropdown that corresponds to the click action given in the specific element. See the Code:

$(document).ready(function() {
  var menu = $('.md-menu'),
    orign = $('.dropdown'),
    $target,
    dropdown,
    defaults = {
      inDuration: 400,
      outDuration: 400,
      show: 'easeOutSine',
      hide: 'easeOutCubic'
    };

  if (!menu.length) {
    return;
  }

  $('.md-menu li').each(function() {
    var delay = $(this).index() * 100 + 'ms';
    $(this).css({
      'transition-delay': delay
    });
  });

  function show(e) {
    $target = $(e.target);
    dropdown = $target.next();

    var offsetTop = ($target.offset() || {
        "top": NaN
      }).top - $(window).scrollTop(),
      windowHeight = window.innerHeight,
      verticalOffset = $target.innerHeight(),
      adjustedHeight = windowHeight - offsetTop - verticalOffset;

    dropdown.css({
      'padding': '0',
      'width': $target.outerWidth(),
      'max-height': adjustedHeight,
      'overflow-y': 'auto'
    }).show({
      'duration': defaults.inDuration,
      'easing': defaults.show
    }).addClass('active');
  };

  function position(e) {
    $target = $(e.target);
    dropdown = $target.next();

    dropdown.css({
      'top': ($target.offset().top + $target.outerHeight()) - $target.outerHeight(),
      'left': dropdown.hasClass('right') ?
        $target.offset().left - (dropdown.outerWidth() - $target.outerWidth()) : $target.offset().left
    });
  };

  orign.click(function(e) {
    e.preventDefault();
    show(e);
    position(e);
    
    $target = $(e.target);
    dropdown = $target.next(); console.log(dropdown);

    $(document).on('click', function(e) {
      if (!dropdown.is(e.target) && !$target.is(e.target)) {
        dropdown.hide({
          'duration': defaults.outDuration,
          'easing': defaults.hide
        }).removeClass('active');
        $(document).off('click');
      }
    });
  });
  $(window).on('resize', function(e) {
    if (menu.is(':visible')) {
      position(e);
    }
  });
});
.md-menu {
  position: absolute;
  display: none;
  list-style: none;
  z-index: 100;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
  background-color: #fff;
  -ms-box-shadow: 0 2px 5px rgba(0, 0, 0, .16), 0 2px 10px rgba(0, 0, 0, .12);
  -o-box-shadow: 0 2px 5px rgba(0, 0, 0, .16), 0 2px 10px rgba(0, 0, 0, .12);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .16), 0 2px 10px rgba(0, 0, 0, .12);
}
.md-menu li {
  clear: both;
  cursor: pointer;
  text-align: left;
  text-transform: none;
  padding: 14px 16px;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=0);
  filter: alpha(opacity=0);
  -webkit-transform: translateY(-30%);
  -moz-transform: translateY(-30%);
  -ms-transform: translateY(-30%);
  -o-transform: translateY(-30%);
  transform: translateY(-30%);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: #666;
}
.md-menu li:hover {
  background-color: #eee;
}
.md-menu li.divider {
  height: 1px;
  padding: 0;
  overflow: hidden;
  background-color: #e8eaea;
}
.md-menu li > a {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  text-decoration: none;
  color: #666;
}
.md-menu.active li {
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  -ms-filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100);
  filter: alpha(opacity=100);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

<div class="row">
  <a class="btn red dropdown">dropdown</a>
  <ul class="md-menu">
    <li><a href="#">Teste1</a>
    </li>
    <li><a href="#">Teste2</a>
    </li>
    <li><a href="#">Teste3</a>
    </li>
    <li><a href="#">Teste4</a>
    </li>
  </ul>
</div>

If you noticed I repeat the $target and dropdown several times and I wanted to reduce the use trying to make a global variable or some other alternative and almost forgetting window.resize is not sending $target and dropdown to perform the update.

    
asked by anonymous 27.08.2016 / 22:18

0 answers