javascript - 如何在点击时进行滑动切换？

Question

我目前正在使用媒体查询和(max-width: 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> 

这是CSS

#js-close {display:block;display:none;width:35px;height:35px;margin:17px  10px; position: absolute;
right: 0;}
.js-close{background:url(images/close-icon.png) center center no-repeat; opacity: 0.75; }

这是媒体

@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");    
    });
});

Answer 1

你的代码有一些问题。

1. 在 JQ 中，您没有正确编写选择器(js-close 之前需要有 #，而 p_phone 需要改为 p.phone )

2. 在 CSS 中，您需要使用 transform:translateX(-100%) 隐藏您的 p.phone，然后使用 在类 open 时显示它>转换:translateX(0%) 。同时将 transition 添加到 p.phone 中，这样当你关闭它时，它就会有 transition

检查下面的片段(Open = 打开按钮，Close = 关闭按钮)

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

P.S 我删除了媒体查询，因此它可以在代码段中使用。

使用媒体查询检查 fiddle > jsFiddle

var open = $("#js-phone"),
    close = $("#js-close"),
    phone = $('p.phone')
$("body").on("click", function(e) {
  var target = $(e.target)
  if (target.is(open)) {
    $(phone).addClass("opened")
  }
  if (target.is(close)) {
    $(phone).removeClass("opened")
  }
})

p.phone {
  transform: translateX(-120%);
  position: fixed;
  top: 0;
  transition: 0.3s;
  -webkit-transition: all 0.3s ease-out;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  background-color: #fff;
  display: block;
}

.contacts {
  margin-top: 100px;
}

/*@media screen and (max-width: 480px) {*/
  p.phone.opened {
    transform: translateX(0);
  }
/*}*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">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'>Open</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>