MENU: The arrow does not change down again

Navigation
3

Here I get the arrow pointing up 

	$('.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>

Faltaria is that the arrow of the dropdown changes of direction downwards

    
asked by Diego Sagredo 05.01.2017 в 16:41
source

2 answers

1

I'll give you a solution that simplifies the matter a bit: the idea is that the arrow depends on a class defined by you, then all you have to do is add / remove the class when the menu is active (using toggleClass ).

For example: 

$('.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>

Another option would be to use only CSS, showing the submenu depending on the focus of the link within the menu (selected with :focus and the selector "brother" ~ )

Something like this: 

.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>

But this solution poses some problems:

  • It works better if you know the height of the submenu, something you will not always know if it is dynamic (you could set a high value, but then it will look like there is a delay).
  • The menu does not close when you press "menu" when it is open (if it closes if you press outside the menu or in another option).
answered by 05.01.2017 / 17:32
source
4

You are actually checking with a class in which you never add.

You should add or remove the class in with the methods: 

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

Your modified example: 

$('.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>
    
answered by 05.01.2017 в 16:56
C drawing patterns Find a character that is not a space or a letter, including accents and diacritics of Spanish