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.