2

$(document).ready(function(){
    $('body').on('click','.fa-angle-down', toggleParent );
    function toggleParent() {
        $(this)
            .parents('.item.parent')
            .toggleClass('active')
            .parents('.sub-menu')
            .toggleClass('open');
        $(this).toggleClass('active');
    }
});
.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">
        <a href="" class="noLink">Каталог</a>
        <i class="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>
    <div class="item">  
        <a href="">Доставка</a>
    </div>
    <div class="item">
        <a href="">О нас</a>
    </div>
    <div class="item">
        <a href="">Магазины</a>
    </div>
    <div class="item">
        <a href="">Новости</a>
    </div>
    <div class="item">
        <a href="">Вакансии</a>
    </div>
    <div class="item">
        <a href="">Рецепты</a>
    </div>
    <div class="item">
        <a href="">Контакты</a>
    </div>
</nav>

2
  • А где вопрос-то?
    – Qwertiy
    27 сен 2017 в 7:46
  • на не срабатывает скрипт
    – Aslero
    27 сен 2017 в 9:10

1 ответ 1

2

Использовать 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>

13
  • если будет 2 icon-angle-down , то при клике на один ракрываются все почему-то
    – Aslero
    27 сен 2017 в 5:59
  • 1
    @Aslero смотря как добавить icon-angle-down. Обновил ответ. Если так то проблем не должно быть 27 сен 2017 в 6:03
  • почему то не работает .parents('.sub-menu') .toggleClass('open');
    – Aslero
    27 сен 2017 в 6:09
  • вот полностью код $(document).ready(function(){ $('body').on('click','.icon-angle-down', toggleParent ); function toggleParent() { $(this) .parents('.item.parent') .toggleClass('active') .parents('.sub-menu') .toggleClass('open'); $(this).toggleClass('active'); } });
    – Aslero
    27 сен 2017 в 6:09
  • Но, я то ведь не так написал, правильно? 27 сен 2017 в 6:16

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.