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

Question

我目前正在使用media queries 和(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

@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，然后在具有 opened 和 transform:translateX(0%) 的类时显示它。还要将transition添加到p.phone，这样当你关闭它时，它就会有过渡

检查下面的sn-p（打开=打开按钮，关闭=关闭按钮）

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

P.S 我删除了媒体查询，所以它可以在 sn-p 中工作。

检查 fiddle with media query > 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>

Answer 2

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

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

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

<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" style='display:none'>
    <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'>Phone</a>
  <a id="js-cart" class="js-cart" href="/basket">2</a>
  <a id='js-mnu' class='js-mnu'>3</a>
  <a id="js-cat" class="js-cat">4</a>
  </div>