JQuery does not execute correctly

Navigation
0

I'm creating a sidebar that will contain some accessibility options. The big one is in parts the sidebar is working properly.

1st Clicking on the accessibility icon, the sidebar opens normally, if you click the icon again, it closes and clicks once more, the sidebar opens, and so on ... ok.

2º Within the sidebar was added an "X" button to close the sidebar, the goal is to hide the accessibility icon when the sidebar is open and the user should close the sidebar with the "X". When clicking the accessibility icon, the sidebar opens, if the "X" is clicked, the sidebar closes normally, but if I click the accessibility icon again to open the sidebar, it will not open anymore. I tried to understand what could be happening, but I could not, does anyone have an idea of what is happening? Link to example: link

HTML: 

<a class="abriracessibilidade" accesskey="0" title="Acessibilidade"><i class="uk-icon-wheelchair"></i></a>
<div class="menuacessibilidade">
    <div class="">
        <div class="uk-flex uk-flex-right">
            <a class="via-close">X</a>
        </div>
        <a href="#body" accesskey="1" title="Menu">Menu</a>
        <a href="#tm-top-b" accesskey="2" title="">Top b</a>
        <a href="#tm-top-c" accesskey="3" title="">Top c</a>
        <a href="#tm-top-d" accesskey="4" title="">Top d</a>
        <a href="#tm-main" accesskey="5" title="">Main</a>
        <a href="#tm-bottom-a" accesskey="6" title=""></a>
        <a href="#tm-bottom-b" accesskey="7" title=""></a>
        <a href="#tm-bottom-c" accesskey="8" title=""></a>
        <a href="#tm-bottom-d" accesskey="9" title=""></a>
    </div>
</div>

CSS: 

.menuacessibilidade {
  position: fixed;
  top: 3em;
  left: 0;
  width: 30%;
  height: 100%;
  background-color: #FFF;
  text-align: center;
  overflow: auto;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
}
.menuacessibilidade.open {
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
.menuacessibilidade.close {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%)
}

JQuery: 

$(function () {
  $('.abriracessibilidade').on('click', function () {
    $('.menuacessibilidade').toggleClass('open');
  });
});

$(function () {
  $('.via-close').on('click', function () {
    $('.menuacessibilidade').toggleClass('close');
  });
});
    
asked by anonymous 05.10.2017 / 15:42

3 answers

1

$(function () {
  $('.abriracessibilidade, .via-close').on('click', function () {
    $('.menuacessibilidade').toggleClass('open');
  });
});
.menuacessibilidade {
  position: fixed;
  top: 3em;
  left: 0;
  width: 30%;
  height: 100%;
  background-color: #FFF;
  text-align: center;
  overflow: auto;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
}
.menuacessibilidade.open {
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}
.menuacessibilidade.close {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.3/css/uikit.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css">
<a class="abriracessibilidade" accesskey="0" title="Acessibilidade"><i class="uk-icon-wheelchair"></i></a>
<div class="menuacessibilidade">
    <div class="">
        <div class="uk-flex uk-flex-right">
            <a class="via-close">X</a>
        </div>
        <a href="#body" accesskey="1" title="Menu">Menu</a>
        <a href="#tm-top-b" accesskey="2" title="">Top b</a>
        <a href="#tm-top-c" accesskey="3" title="">Top c</a>
        <a href="#tm-top-d" accesskey="4" title="">Top d</a>
        <a href="#tm-main" accesskey="5" title="">Main</a>
        <a href="#tm-bottom-a" accesskey="6" title=""></a>
        <a href="#tm-bottom-b" accesskey="7" title=""></a>
        <a href="#tm-bottom-c" accesskey="8" title=""></a>
        <a href="#tm-bottom-d" accesskey="9" title=""></a>
    </div>
</div>

The question is in ToogleClass , when you set close . Try to use it that way

    
05.10.2017 / 15:47
1

You did not remove the close class before giving toggleClass("open") , you also failed to remove the open class by giving toggleClass("close") .

Your code should look like this: 

$(function () {
  $('.abriracessibilidade').on('click', function () {
    $('.menuacessibilidade').removeClass("close").toggleClass('open');
  });

    $('.via-close').on('click', function () {
    $('.menuacessibilidade').removeClass("open").toggleClass('close');
  });
});
    
05.10.2017 / 15:48
0

Just do this in your script , you do not need all of this code to perform the same function. 

$('.abriracessibilidade, .via-close').on('click', function () {
    $('.menuacessibilidade').toggleClass('open');
});
  

Understanding the problem

When you click the Icon it applies the open style, 

$(function () {
  $('.abriracessibilidade').on('click', function () {
    $('.menuacessibilidade').toggleClass('open');
  });
});

Here it goes the same as the first one, except that instead of removing the open style it applies the close , where it generates the problem, open is still applied. 

$(function () {
  $('.via-close').on('click', function () {
    $('.menuacessibilidade').toggleClass('close');
  });
});
    
05.10.2017 / 15:49
String string in Javascript incompatible types boolean can not be converted to Users