Question

我目前正在使用media queries和(max-width: 480px)对网站进行自适应设计。现在，我遇到了从左到右在slideToggle上jQuery的问题。基本上，我是通过使用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

您的代码存在问题。

在JQ中，您没有正确编写选择器（js-close需要#才能使用p_phone，而p.phone需要transform:translateX(-100%)代替
，您需要使用opened隐藏您的p.phone，然后在课程transform:translateX(0%)与transition时显示。同时将p.phone添加到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") } })，以便当您关闭它时，它会有转换

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

我更改了JQ，因此使用选择器缓存（变量）和事件定位更易读，更容易更改。希望你不要介意

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

检查媒体查询小提琴＆gt; jsFiddle

＆＃13;

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);
  }
/*}*/

＆＃13;

<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>

＆＃13;

JSON.stringify

＆＃13;

Answer 2

首次加载时使用style='display:none'。点击链接后点击展示您的div，然后使用addClass添加课程。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: