gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 19:36:10 25 4
gpt4 key购买 nike

我目前正在使用媒体查询(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");
});
});

最佳答案

你的代码有一些问题。

  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>

关于javascript - 如何在点击时进行滑动切换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43781860/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com