Jquery 单击时更改单个元素上的css，并恢复其他元素上的css

我有一个移动导航，有4个下拉元素。单击单个元素后，我想更改元素css并打开下拉菜单，如果其他元素打开，则关闭它们并恢复css

这是HTML

<div class="mobileNavBar">
  <div class="svgikonica" id="svgStan">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    </svg>
  </div>
  <p>
    Stanovništvo
  </p>
</div>
<div class="podlinkovi">
  <a href="#">Mobile Express racun</a>
  <a href="#">Mobile Standard racun</a>
  <a href="#">Krediti</a>
</div>

<div class="mobileNavBar">
  <div class="svgikonica">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    </svg>
  </div>
  <p>
    Privreda
  </p>
</div>
<div class="podlinkovi">
  <a href="#">Platni promet</a>
</div>

<div class="mobileNavBar">
  <div class="svgikonica">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    </svg>

  </div>
  <p>
    O Nama
  </p>
</div>
<div class="podlinkovi">
  <a href="#">Novosti</a>
</div>

<div class="mobileNavBar">
  <div class="svgikonica">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    </svg>

  </div>
  <p>
    Info centar
  </p>
</div>
<div class="podlinkovi">
  <a href="#">Kontakt centar</a>
  <a href="#">Bankomati</a>
  <a href="#">Poslovnice</a>
  <a href="#">Kursna lista</a>
  <a href="#">Medija centar</a>
</div>'

我需要添加到这个函数中，只需单击一个。mobileNavBar会更改类样式，并且只更改一个。podlinkovi将打开，其他所有功能将关闭

这是CSS

  .mobileNavBar{
width: 100%;
height: 60px;
overflow: hidden;
}
.podlinkovi{
display: none;
}
.svgikonica {
float: left;
}
.svgikonica svg {
stroke: white;
height:50px;
padding:5px;
}
.mobileNavBar p{
    line-height: 60px;
    vertical-align: middle;
    float: right;
    padding-right: 35px;
    margin: 0;
    color: white;
}
.podlinkovi a{
width: 100%;
background-color:rgba(255,255,255,0.9);
color: black;
float: left;
line-height: 40px;
font-size: 15px;
padding: 5px 0;
vertical-align: middle;
padding-left: 5px;

---

不要直接为元素设置样式。在选定的类上使用一个类，然后在选择另一个类时，从以前选择的任何类中删除该类。CSS在哪里？不要直接为元素设置样式。在选定的类上使用一个类，然后在选择另一个类时，从以前选择的任何类中删除该类。CSS在哪里？

  .mobileNavBar{
width: 100%;
height: 60px;
overflow: hidden;
}
.podlinkovi{
display: none;
}
.svgikonica {
float: left;
}
.svgikonica svg {
stroke: white;
height:50px;
padding:5px;
}
.mobileNavBar p{
    line-height: 60px;
    vertical-align: middle;
    float: right;
    padding-right: 35px;
    margin: 0;
    color: white;
}
.podlinkovi a{
width: 100%;
background-color:rgba(255,255,255,0.9);
color: black;
float: left;
line-height: 40px;
font-size: 15px;
padding: 5px 0;
vertical-align: middle;
padding-left: 5px;