Javascript 如何在单击时进行幻灯片切换？

我目前正在使用

媒体查询
和
（最大宽度：480px）
为网站进行响应式设计。现在，我有一个问题，就是在
jQuery
上从左到右切换
slideToggle
。基本上，我通过使用jQuery将类添加到元素中，并在
CSS
中对此进行样式化。然而，我可能会认为有其他的方法使它。。。
但这是我的方法。请大家帮帮我，也许你们还有其他的建议来解决这个问题

下面是我的
html
：

     <div class="header">
    <div class="logo"><a href="/">Sport-concept.ru - интернет-магазин спортивных товаров</a></div>
    <div class="contacts">
      <p class="phone">+7(499)394-46-03<br />
+7(985)427-48-55<br />
 </p>
      <a id="js-close" class="js-close"></a>
      <p class="email"><a href="mailto:sport-concept@yandex.ru">sport-concept@yandex.ru</a></p>
    </div>
        <a id='js-phone' class='js-phone'></a>
        <a id="js-cart" class="js-cart" href="/basket"></a>
        <a id='js-mnu' class='js-mnu'></a>
        <a id="js-cat" class="js-cat"></a>
    <div class="mainmenu">
        <a id='js-cross' class='js-cross'></a>
      <ul>

                <li><a href="/" ><span></span></a></li>
                <li><a href="/menu/16" ><span></span></a></li>
                <li><a href="/menu/3" ><span></span></a></li>
                <li><a href="/menu/5" ><span></span></a></li>
                <li><a href="/articles" ><span></span></a></li>
                <li><a href="/menu/21" ><span></span></a></li>
                <li><a href="/menu/22" ><span></span></a></li>      </ul>
    </div>
  </div> 

这是
媒体

@media screen and (max-width: 480px) {
p.phone._opened {
        position: fixed;
        top: 0;
        background-color: #fff;
        width: 100%;
        height: 100%;
        transform: translateX(-100%);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-transition: all 0.3s ease-out;
        display: block;
    }
}

还有我的jQuery：

    $(document).ready(function(){   
    $("#js-phone").click(function(){
       $('p.phone').addClass("_opened");
    });
    $("js-close").click(function(){
        $('p_phone').removeClass("_opened");    
    });
});

首次加载时使用
style='display:none'
。在链接之后，单击显示您的
div
，并使用
addClass
添加类


$（“#js手机”）。单击（函数（）{
$（'.contacts'）.show（）；
$（'p.phone'）.addClass（'u opened'）；
});
$（“.js关闭”）。单击（函数（）{
$（'.contacts'）.hide（）；
$（'p_phone'）。移除类（'u opened'）；
});
@媒体屏幕和（最大宽度：480px）{
p、 电话打开了{
位置：固定；
排名：0；
背景色：#fff；
宽度：100%；
身高：100%；
转化：translateX（-100%）；
溢出x：隐藏；
溢出y：自动；
-webkit过渡：所有0.3版本都可以轻松过渡；
显示：块；
}
}

+7（499）394-46-03
+7（985）427-48-55




3.
4.
您的代码有一些问题

在JQ中，您没有正确地写入选择器（
js close
需要在前面加
，而
p\u phone
需要加
p.phone
）

在CSS中，您需要使用
transform:translateX（-100%）
隐藏您的p.phone，然后在使用
transform:translateX（0%）
打开类
时显示它。同时将
transition
添加到
p.phone
中，这样当您关闭它时，它将具有transition

检查下面的代码段（打开=打开按钮，关闭=关闭按钮）

我使用选择器缓存（变量）和事件定位对JQ进行了一些修改，使其更具可读性，更易于修改。希望你不介意

另外，我删除了媒体查询，因此它将在代码段中工作

选中“摆弄媒体查询”>


var open=$（“#js电话”），
关闭=$（“#js关闭”），
电话=$（'p.phone'）
$（“正文”）。在（“单击”）上，函数（e）{
var target=$（e.target）
如果（目标为（开放））{
$（电话）.addClass（“打开”）
}
如果（目标为（关闭））{
$（电话）.removeClass（“已打开”）
}
})
p.phone{
转化：translateX（-120%）；
位置：固定；
排名：0；
过渡：0.3s；
-webkit过渡：所有0.3版本都可以轻松过渡；
溢出x：隐藏；
溢出y：自动；
宽度：100%；
背景色：#fff；
显示：块；
}
.联系人{
边缘顶部：100px；
}
/*@媒体屏幕和屏幕（最大宽度：480px）{*/
p、 电话，打开了{
变换：translateX（0）；
}
/*}*/

+7（499）394-46-03

+7（985）427-48-55












请分享您的完整代码trying@SahilDhir这是我试图做的全部代码
    $(document).ready(function(){   
    $("#js-phone").click(function(){
       $('p.phone').addClass("_opened");
    });
    $("js-close").click(function(){
        $('p_phone').removeClass("_opened");    
    });
});