Нужно получить высоту Родительского элемента в меню и установить данное значение в line-height кнопки, что бы выровнять стрелку по центу.
$(document).ready(function() {
$('#cssmenu li.has-sub >span').on('click', function() {
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').hide();
} else {
element.addClass('open');
element.children('ul').show();
element.siblings('li').children('ul').hide();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').hide();
}
});
$('.accordion-btn').each(function() {
var parentItem = $('#accordion-btn').closest('li'),
lineheight = $('> a', parentItem).innerHeight();
$('#accordion-btn').css({
'line-height': lineheight + 'px',
'height': lineheight
});
})
});
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu {
width: 200px;
font-family: Helvetica, Arial, sans-serif;
color: #ffffff;
}
#cssmenu ul ul {
display: none;
}
.align-right {
float: right;
}
#cssmenu>ul>li>a {
padding: 15px 20px;
border-left: 1px solid #1682ba;
border-right: 1px solid #1682ba;
border-top: 1px solid #1682ba;
cursor: pointer;
z-index: 2;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
background: #36aae7;
background: -webkit-linear-gradient(#36aae7, #1fa0e4);
background: -moz-linear-gradient(#36aae7, #1fa0e4);
background: -o-linear-gradient(#36aae7, #1fa0e4);
background: -ms-linear-gradient(#36aae7, #1fa0e4);
background: linear-gradient(#36aae7, #1fa0e4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#cssmenu>ul>li>a:hover,
#cssmenu>ul>li.active>a,
#cssmenu>ul>li.open>a {
color: #eeeeee;
background: #1fa0e4;
background: -webkit-linear-gradient(#1fa0e4, #1992d1);
background: -moz-linear-gradient(#1fa0e4, #1992d1);
background: -o-linear-gradient(#1fa0e4, #1992d1);
background: -ms-linear-gradient(#1fa0e4, #1992d1);
background: linear-gradient(#1fa0e4, #1992d1);
}
#cssmenu>ul>li.open>a {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
border-bottom: 1px solid #1682ba;
}
#cssmenu>ul>li:last-child>a,
#cssmenu>ul>li.last>a {
border-bottom: 1px solid #1682ba;
}
.holder {
width: 0;
height: 0;
position: absolute;
top: 0;
right: 0;
}
.holder::after,
.holder::before {}
.holder::after {
top: 17px;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
}
#cssmenu>ul>li>a:hover>span::after,
#cssmenu>ul>li.active>a>span::after,
#cssmenu>ul>li.open>a>span::after {
border-color: #eeeeee;
}
.holder::before {
top: 18px;
border-top: 2px solid;
border-left: 2px solid;
border-top-color: inherit;
border-left-color: inherit;
}
#cssmenu ul ul li a {
cursor: pointer;
border-bottom: 1px solid #32373e;
border-left: 1px solid #32373e;
border-right: 1px solid #32373e;
padding: 10px 20px;
z-index: 1;
text-decoration: none;
font-size: 13px;
color: #eeeeee;
background: #49505a;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul li:hover>a,
#cssmenu ul ul li.open>a,
#cssmenu ul ul li.active>a {
background: #424852;
color: #ffffff;
}
#cssmenu ul ul li:first-child>a {
box-shadow: none;
}
#cssmenu ul ul ul li:first-child>a {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul ul li a {
padding-left: 30px;
}
#cssmenu>ul>li>ul>li:last-child>a,
#cssmenu>ul>li>ul>li.last>a {
border-bottom: 0;
}
#cssmenu>ul>li>ul>li.open:last-child>a,
#cssmenu>ul>li>ul>li.last.open>a {
border-bottom: 1px solid #32373e;
}
#cssmenu>ul>li>ul>li.open:last-child>ul>li:last-child>a {
border-bottom: 0;
}
#cssmenu ul ul li.has-sub>a::after {}
#cssmenu ul ul li.active>a::after,
#cssmenu ul ul li.open>a::after,
#cssmenu ul ul li>a:hover::after {
border-color: #ffffff;
}
.accordion-btn-wrap {
width: 20%;
position: absolute;
top: 0;
text-align: center;
cursor: pointer;
display: inline-block;
right: 0px;
z-index: 99999;
border: 1px solid grey;
}
.accordion-btn {
display: inline-block;
width: 100%;
}
.has-sub {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li class='active has-sub'>
<a href='#'><span>Products</span></a>
<span class="accordion-btn-wrap"><!-- Кнопка-->
<span class="accordion-btn">
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</span>
</span>
<!-- Конец кнопки-->
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<span class="accordion-btn-wrap">
<span class="accordion-btn">
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</span>
</span>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
Вроде простая задача, нужно сделать что то вроде цикла, где есть класс has-sub, у того элемента брать высоту и задать ее элементу, пытался написать что то похожее но не работает
Нарисовал схему небольшую
inherit
- берет значение у родительского элемента. Попробуйте, это лучше, чем js. И еще, у вас не правильные селекторы#accordion-btn
- ищет элемент сid="accordion-btn"
.line-height
то и у дочернего элемента сline-height:inherit
тоже будет меняться.