JSリストアイテムをスライドさせる方法

Question

ユーザーがアイテムに触れるときに、それが画面上をスライドする必要がありますが、アイテムの再生時にコード内でリスト内の他のすべてのアイテムもスライドします。私はタッチされたアイテムだけを画面上でスライドする必要があります。

私のhtmlコード：

<ul id="menu-mobile"> 
     <li class="li-mobile hospital"><i class="fa fa-plus fa-2x" aria-hidden="true"></i>Hospital</li> 
     <li class="li-mobile especialidades"><i class="fa fa-star-o fa-2x" aria-hidden="true"></i>Especialidades</li> 
     <li class="li-mobile exames"><i class="fa fa-stethoscope fa-2x" aria-hidden="true"></i>Exames</li> 
     <li class="li-mobile blog">Blog</li> 
     <li class="li-mobile contato"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>Contato</li> 
     <li class="li-mobile emergencia">Emergência</li> 
    </ul> 



$(".li-mobile").click(function(e){ 
     if($(this).hasClass("toggle")) { 
      $(this).removeClass('toggle').siblings().removeClass('toggle'); 
     }else{ 
      $(this).addClass('toggle').siblings().removeClass('toggle'); 
     } 
    }); 

TKS。

Answer 1

$(".li-mobile").click(function(e) { 
 
    $(this).siblings().removeClass('toggle'); 
 

 
    if ($(this).hasClass("toggle")) { 
 
    $(this).removeClass('toggle'); 
 
    } else { 
 
    $(this).addClass('toggle'); 
 
    } 
 
});

#menu-mobile { 
 
    right: 0; 
 
    overflow: hidden; 
 
    z-index: 999; 
 
    position: absolute; 
 
    width: 200px; 
 
} 
 

 
.li-mobile.hospital { 
 
    background-color: #EEF463; 
 
} 
 

 
.li-mobile.especialidades { 
 
    background-color: #E8B281; 
 
} 
 

 
.li-mobile.exames { 
 
    background-color: #A2C8CA; 
 
} 
 

 
.li-mobile.blog { 
 
    background-color: #CE737F; 
 
} 
 

 
.li-mobile.contato { 
 
    background-color: #007969; 
 
} 
 

 
.li-mobile.emergencia { 
 
    background-color: #CC2C69; 
 
} 
 

 
.li-mobile { 
 
    position: relative; 
 
    height: 40px; 
 
    right: -180px; 
 
    list-style-type: none; 
 
    color: #fff; 
 
    width: 100%; 
 
    font-size: 14px; 
 
    -webkit-transition: all 1s ease-in-out; 
 
    -moz-transition: all 1s ease-in-out; 
 
    -o-transition: all 1s ease-in-out; 
 
    transition: all 1s ease-in-out; 
 
} 
 

 
.li-mobile.toggle { 
 
    right: 40px; 
 
    margin-left: 66px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul id="menu-mobile"> 
 
    <li class="li-mobile"><i class="fa fa-plus fa-2x" aria-hidden="true"></i>Hospital</li> 
 
    <li class="li-mobile especialidades"><i class="fa fa-star-o fa-2x" aria-hidden="true"></i>Especialidades</li> 
 
    <li class="li-mobile exames"><i class="fa fa-stethoscope fa-2x" aria-hidden="true"></i>Exames</li> 
 
    <li class="li-mobile blog">Blog</li> 
 
    <li class="li-mobile contato"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>Contato</li> 
 
    <li class="li-mobile emergencia">Emergência</li> 
 
</ul>

すべてliが一緒に動いた理由は、ULのためposition: fixedです。これはabsoluteとし、liはulとは無関係に移動するためにrelativeとします。