如何使幻灯片在点击时切换?

Question

我目前正在使用带有(max-width: 480px)media queries为网站进行响应式设计。现在，我有一个从左到右对jQuery进行slideToggle的问题。基本上，我通过使用 jQuery 将类添加到元素并在CSS中对其进行样式设置。但是，我可能会假设还有其他方法可以做到这一点...... 但这是我的方法。请伙计们帮助我，也许您还有其他一些建议来解决这个问题。

所以，这是我html：

<div class="header">
<div class="logo"><a href="/">Sport-concept.ru - интернет-магазин спортивных товаров</a></div>
<div class="contacts">
<p class="phone">[phone]<br />
[phone]<br />
</p>
<a id="js-close" class="js-close"></a>
<p class="email"><a href="mailto:[e-mail]">[e-mail]</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%)。还要向p.phone添加transition，以便当您关闭它时，它将具有过渡

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

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

附言我删除了媒体查询，因此它将在代码片段中工作.

使用媒体查询检查小提琴> 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">[phone]
<br /> [phone]
<br />
</p>
<a id="js-close" class="js-close">Close</a>
<p class="email"><a href="mailto:[e-mail]">[e-mail]</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">[phone]<br /> [phone]
<br />
</p>
<a id="js-close" class="js-close">Close</a>
<p class="email"><a href="mailto:[e-mail]">[e-mail]</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>