Использовать on и parents
$(document).ready(function(){
$('body').on('click','.fa-angle-down', toggleParent );
function toggleParent() {
$(this).toggleClass('active');
$(this)
.siblings('.sub-menu')
.toggleClass('open');
}
});
.menuIndex{
display: grid;
}
.menuIndex .item {
display: block;
position: relative;
float: left;
}
.menuIndex>.item>a {
display: block;
width: 100%;
color: #707070;
font-weight: 300;
font-size: 14px;
padding: 12px 20px;
}
.menuIndex .item.parent>a {
position: relative;
padding: 12px 20px;
text-transform: uppercase;
cursor: pointer;
background-color: #f0f5f8;
color: #707070;
font-size: 16px;
outline: none;
font-weight: 300;
width: 100%;
z-index: 9;
}
.menuIndex .item.parent.active>a{
background-color: #d9eaf4;
color: #000;
}
.menuIndex .item.parent:hover>.sub-menu>.item>a:first-of-type{
border-top: 1px solid transparent;
}
.menuIndex .item.parent>.sub-menu>.item.parent>.fa-angle-down{
position: absolute;
right: 0;
z-index: 9999;
text-align: right;
padding: 0 15px;
color: #609c60;
top: 0;
line-height: 1.6em;
height: 35px;
font-size: 20px;
width: 45px;
display: block;
}
.menuIndex .item.parent>.sub-menu>.item>.fa-angle-down.active{
transform: rotate(180deg);
text-align: right;
display: flex;
}
.menuIndex .item.parent>.fa-angle-down {
position: absolute;
right: 0;
z-index: 9999;
width: 45px;
text-align: right;
padding: 0 15px;
line-height: 2.1em;
color: #609c60;
font-size: 20px;
top: 0;
height: 45px;
display: block;
}
.menuIndex .item.parent>.fa-angle-down.active {
transform: rotate(180deg);
text-align: right;
display: flex;
}
.menuIndex .item.parent:hover>.sub-menu>.item>.sub-menu>a {
font-size: 12px;
text-decoration: none;
position: initial;
color: #707070;
font-weight: 300;
height: 35px;
padding: 0 20px;
display: block;
width: 100%;
background: #d9eaf4;
}
.menuIndex .item.parent:hover>.sub-menu>.item {
position: relative;
border: 1px solid #dedede;
border-top: 1px solid transparent;
}
.menuIndex .item.parent:hover>.sub-menu>.item.parent {
height: auto;
}
.menuIndex .item.parent:hover>.sub-menu>.item>a{
font-size: 12px;
}
.menuIndex .item.parent>.sub-menu,header .menu .menuIndex .items.parent>.sub-menu>.item>.sub-menu{
display: none;
}
.menuIndex .item.parent a:after{
content:"";
}
.menuIndex .item.parent:hover>.sub-menu{
display: none;
}
.menuIndex .item.parent>.sub-menu.open, header .menu .menuIndex .items.parent>.sub-menu>.item>.sub-menu.open {
display: grid;
position: relative;
top: 0;
}
<script src="https://use.fontawesome.com/094f305d52.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menuIndex">
<div class="item parent active">
<a href="#" class="noLink">Каталог</a>
<i class="main fa fa-angle-down" aria-hidden="true"></i>
<div class="sub-menu">
<div class="item parent">
<a href="#">Молочные продукты</a>
<i class="fa fa-angle-down" aria-hidden="true"></i>
<nav class="sub-menu">
<a href="#">Мука</a>
<a href="#">Крупы</a>
<a href="#">Сахар</a>
<a href="#">Греча</a>
</nav>
</div>
<div class="item">
<a href="#">Молочные продукты</a>
</div>
<div class="item">
<a href="#">Молочные продукты</a>
</div>
<div class="item parent">
<a href="#">Молочные продукты</a>
<i class="fa fa-angle-down" aria-hidden="true"></i>
<nav class="sub-menu">
<a href="#">Мука</a>
<a href="#">Крупы</a>
<a href="#">Сахар</a>
<a href="#">Греча</a>
</nav>
</div>
<div class="item">
<a href="#">Молочные продукты</a>
</div>
</div>
</div>
</nav>