МЕНЮ: Стрела не меняется вниз снова

Здесь я добиваюсь того, чтобы стрела обозначилась вверх

	$('.menu').click(function(){
		$(this).children('.menu-sub').slideToggle();
	});

$(".sidebar-nav > li.menu > a").click(function(){
		
			if($(this).siblings('ul.menu-sub').hasClass('in')){
			//DOWN
			$(this).css('background-image','url("https://i.dmtinc.cl/i/2017/01/05/icon__FLECHA24528.png")');
			}else{
      	//UP
				$(this).css('background-image','url("https://i.dmtinc.cl/i/2017/01/05/icon__FLECHAUP16ba0.png")');
			}			
		}
	);
.sidebar-nav li a {
    display: block;
}

ul li .menu-sub {
	display: none;
	width: 100%;
	position: relative;
}

ul.sidebar-nav > li > a {
    background-image: url(https://i.dmtinc.cl/i/2017/01/05/icon__FLECHA24528.png);
    background-repeat: no-repeat;
    background-position-x: 110px;
    background-position-y: 7px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-wrapper" role="navigation">
    <ul class="sidebar-nav">
        <li class="menu">
            <a href="#">Menu </a>
            <ul class="menu-sub">
                <li><a href="#">Otras Listas</a></li>
                <li><a href="#">Contenidos del sitio</a></li>
            </ul>
        </li>
    </ul>
</div>

не было бы дело в том, что стрела dropdown изменила адрес вниз

3
задан 05.01.2017, 17:51
0 ответов

Я буду помещать тебе решение, которое упрощает немного тему: идея состоит в том, чтобы стрела зависела от класса, определенного тобой, тогда единственное, что ты был бы должен делать, состоит в том, чтобы добавлять / снимать класс, когда меню будет активным (используя toggleClass).

Например:

$('.menu').click(function(){
  $(this).children('.menu-sub').slideToggle();
  $(this).toggleClass("active");
});
.sidebar-nav li a {
    display: block;
}

ul li .menu-sub {
	display: none;
	width: 100%;
	position: relative;
}

ul.sidebar-nav > li > a {
    background-image: url(https://i.dmtinc.cl/i/2017/01/05/icon__FLECHA24528.png);
    background-repeat: no-repeat;
    background-position-x: 110px;
    background-position-y: 7px;
}

ul.sidebar-nav > li.active > a {
  background-image: url("https://i.dmtinc.cl/i/2017/01/05/icon__FLECHAUP16ba0.png");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-wrapper" role="navigation">
    <ul class="sidebar-nav">
        <li class="menu">
            <a href="#">Menu </a>
            <ul class="menu-sub">
                <li><a href="#">Otras Listas</a></li>
                <li><a href="#">Contenidos del sitio</a></li>
            </ul>
        </li>
    </ul>
</div>

Другой выбор состоял бы в том, чтобы использовать только CSS, показывая субменю в зависимости от фокуса ссылки внутри меню (выбранный с :focus и селектор "брата" ~)

Немного как это:

.sidebar-nav li a {
    display: block;
}

ul li .menu-sub {
	width: 100%;
	position: relative;
    overflow:hidden;
    max-height:0px;
    transition: all 0.6s;
}

ul.sidebar-nav > li > a {
    background-image: url(https://i.dmtinc.cl/i/2017/01/05/icon__FLECHA24528.png);
    background-repeat: no-repeat;
    background-position-x: 110px;
    background-position-y: 7px;
}

ul.sidebar-nav > li > a:focus {
  background-image: url("https://i.dmtinc.cl/i/2017/01/05/icon__FLECHAUP16ba0.png");
}

ul.sidebar-nav > li > a:focus ~ .menu-sub {
  max-height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-wrapper" role="navigation">
    <ul class="sidebar-nav">
        <li class="menu">
            <a href="#">Menu </a>
            <ul class="menu-sub">
                <li><a href="#">Otras Listas</a></li>
                <li><a href="#">Contenidos del sitio</a></li>
            </ul>
        </li>
    </ul>
</div>

Но это решение выдвигает какие-то проблемы:

  • Функционируй лучше, если ты знаешь высоту субменю, что-то, что ты не всегда будешь знать, если он динамический (ты мог бы помещать высокую, но тогда стоимость будет видно как будто была задержка).
  • Меню не закрывается, когда ты нажимаешь на "меню", когда он открыт (если он закроется, если ты нажмешь вне меню или в другом выборе).
1
ответ дан 03.12.2019, 17:52

Действительно ты реализуешь проверку с классом in которую ты не добавляешь никогда.

Ты был бы должен добавлять или снимать класс in с методами:

$(this).siblings('ul.menu-sub').removeClass('in'); 
$(this).siblings('ul.menu-sub').addClass('in');

Твой измененный пример:

$('.menu').click(function(){
     $(this).children('.menu-sub').slideToggle();
});

$(".sidebar-nav > li.menu > a").click(function(){
    if($(this).siblings('ul.menu-sub').hasClass('in')){
        //DOWN
	$(this).css('background-image','url("https://i.dmtinc.cl/i/2017/01/05/icon__FLECHA24528.png")'); 
        $(this).siblings('ul.menu-sub').removeClass('in'); 
    }else{
      	//UP
	$(this).css('background-image','url("https://i.dmtinc.cl/i/2017/01/05/icon__FLECHAUP16ba0.png")');
        $(this).siblings('ul.menu-sub').addClass('in'); 
    }			
});
.sidebar-nav li a {
    display: block;
}

ul li .menu-sub {
    display: none;
    width: 100%;
    position: relative;
}

ul.sidebar-nav > li > a {
    background-image: url(https://i.dmtinc.cl/i/2017/01/05/icon__FLECHA24528.png);
    background-repeat: no-repeat;
    background-position-x: 110px;
    background-position-y: 7px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-wrapper" role="navigation">
    <ul class="sidebar-nav">
        <li class="menu">
            <a href="#">Menu </a>
            <ul class="menu-sub">
                <li><a href="#">Otras Listas</a></li>
                <li><a href="#">Contenidos del sitio</a></li>
            </ul>
        </li>
    </ul>
</div>
4
ответ дан 03.12.2019, 17:52
  • 1
    он очень скоро даст в enter v.v xDD, но na, мое решение было уродливым, используя booleana, чтобы контролировать изображение, вместо детей –  05.01.2017, 17:58
  • 2
    @Error404 Спасибо, спасибо, спасибо спасибо –  05.01.2017, 18:11

Теги

Похожие вопросы