如何使用jquery从右向左滑动?
问题描述:
我尝试在div标签中实现三个标签,从右向左滑动,当时还有两个标签从右向左滑动,所以我该怎么办? 这里是我的PHP代码,如何使用jquery从右向左滑动?
<body>
<div id="collapsible_section">
<ul id="collapsible_buttons">
<li>
<a href="#" class="a">Button A </a>
<div class="hidden_content1">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
</div>
</li>
<li>
<a href="#" class="aa">Button B</a>
<div class="hidden_content2">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation </p>
</div>
</li>
<li>
<a href="#" class="aaa">Button C</a>
<div class="hidden_content3">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exerc</p>
</div>
</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="custom.js"></script>
</body>
这里是CSS代码,
html, body{
margin: 0;
padding: 0;
font-family: arial;
font-size: 13px;
color: #000;
background-color: rgb(255, 102, 102);
}
#collapsible_section {
position: absolute;
right: 0;
top: 200px;
}
#collapsible_buttons {
list-style: none;
}
#collapsible_buttons, #collapsible_buttons li{
margin: 0;
padding: 0;
}
.a{
color: #fff;
display: block;
padding: 10px 30px;
background: #000;
text-decoration: none;
width: 70px;
}
.aa{
color: #fff;
display: block;
padding: 10px 30px;
background: #000;
text-decoration: none;
width: 70px;
}
.aaa{
color: #fff;
display: block;
padding: 10px 30px;
background: #000;
text-decoration: none;
width: 70px;
}
#collapsible_buttons li{
margin-bottom: 10px;
}
.hidden_content1 {
background: yellow;
color: black;
padding: 10px 30px;
display: none;
width: 350px;
}
.hidden_content2 {
background: yellow;
color: black;
padding: 10px 30px;
width: 350px;
display: none;
width: 350px;
}
.hidden_content3 {
background: yellow;
color: black;
padding: 10px 30px;
display: none;
width: 350px;
}
这里是我的js代码,
jQuery(document).ready(function($){
$('#collapsible_buttons .a').click(function(e){
e.preventDefault();
$('.hidden_content2').hide(2000);
$('.hidden_content3').hide(2000);
$(".hidden_content1").toggle(2000);
});
});
jQuery(document).ready(function($){
$('#collapsible_buttons .aa').click(function(e){
e.preventDefault();
$('.hidden_content1').hide(2000);
$('.hidden_content3').hide(2000);
$(".hidden_content2").toggle(1000);
});
});
jQuery(document).ready(function($){
$('#collapsible_buttons .aaa').click(function(e){
e.preventDefault();
$('.hidden_content2').hide(2000);
$('.hidden_content1').hide(2000);
$(".hidden_content3").toggle(2000);
});
});
,请告诉我,我可以做的只能点击标签是幻灯片左侧没有另外两个标签是幻灯片。
答
看到片断低于或jsFiddle
有你的代码
为了获得最佳的性能和简洁的代码切勿使用多类 相同元素的几个问题。如.a .aa .aaa
或 .hidden_content1,.hidden_content2
等。使用普通类,然后 使用不同的选择器来选择所需的项目。同样你 设置相同的风格,例如所有a
s,但你写的风格3 次。这不是很好的做法。看看更改后的HTML和 CSS。
以上几点对于jQuery部分是一样的。不要写 多个点击功能,而是只写一个a
和 ,然后使用next()
method选择.hidden_content
。 所以你会选择只点击a
中的.next()方法允许我们通过紧随其后的同级
$('#collapsible_buttons a').on("click",function(e){
e.preventDefault();
var showMe = $(this).next(".hidden_content")
\t \t $(showMe).toggle(1000).toggleClass("showMe")
\t \t $(this).toggleClass("floatMe")
$(this).parents("li").siblings("li").find(".hidden_content").hide().removeClass(".showMe")
\t \t $(this).parents("li").siblings("li").find(".floatMe").removeClass()
});
html, body{
margin: 0;
padding: 0;
font-family: arial;
font-size: 13px;
color: #000;
background-color: rgb(255, 102, 102);
}
#collapsible_section {
position: absolute;
right: 0;
top: 200px;
}
#collapsible_buttons {
list-style: none;
}
#collapsible_buttons, #collapsible_buttons li{
margin: 0;
padding: 0;
}
a{
color: #fff;
padding: 10px 30px;
background: #000;
text-decoration: none;
min-width: 100px;
\t \t float:right;
\t \t clear:both;
\t \t display:block;
\t
}
a.floatMe {
\t \t float:left;
\t \t width:100%;
}
#collapsible_buttons li{
margin-bottom: 10px;
}
.hidden_content {
background: yellow;
color: black;
padding: 10px 30px;
display: none;
width: 350px;
\t \t float:left;
\t \t clear:both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="collapsible_section">
<ul id="collapsible_buttons">
<li>
<a href="#">Button A </a>
<div class="hidden_content">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
</div>
</li>
<li>
<a href="#">Button B</a>
<div class="hidden_content">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation </p>
</div>
</li>
<li>
<a href="#">Button C</a>
<div class="hidden_content">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exerc</p>
</div>
</li>
</ul>
</div>
不搜索相邻内容是这种类型,当我点击secound 标签时间切换将关闭。@ Mihai T –
谢谢,bt不能正常工作。@ Mihai T –
现在检查答案或在这里> https://jsfiddle.net/nkjdc92z/4/ –