0
with a problem in the development of a dropdown
simple, I’m not able to take the value of a function to pass to others, the values I’m looking for are $target
and dropdown
which corresponds to the click action given in the specific element. See 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>
<script src="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 understand I repeat several times the $target
and the dropdown
and I wanted to reduce the use by trying to make a global variable or some other alternative and almost forgetting the window.resize
is not sending the $target
and the dropdown
to perform the update.
Once you are extracting the element from the generated event in
$(window).on('resize', function(e) {
That’s not gonna give us an element of the DOM. Explain better which part doesn’t behave as you want and what the behavior should be so we can give more useful answers.– Sergio
The correct execution occurs but I cannot update the values
top
andleft
when I modify the screen size, when running thewindow.resize
it sends to blank function the variable, wanted a way to store this value.– iLeonardo Carvalho