我正在尝试在 div 标签中实现三个标签从右向左滑动，那时还有两个标签从右向左滑动，所以我该怎么办？ 这是我的 PHP 代码，
<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 但您编写样式 3
次。这不是好的做法。看一下更改后的 HTML 和
CSS 。
以上这点对于jQuery部分也是一样的。不要写
多次点击功能，而是只为所有 a 和
然后使用 next() method 选择 .hidden_content .
所以你将只选择被点击的 a
the .next() method allows us to search through the immediately following sibling
$('#collapsible_buttons a').on("click",function(e){
e.preventDefault();
var showMe = $(this).next(".hidden_content")
$(showMe).toggle(1000).toggleClass("showMe")
$(this).toggleClass("floatMe")
$(this).parents("li").siblings("li").find(".hidden_content").hide().removeClass(".showMe")
$(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;
float:right;
clear:both;
display:block;
}
a.floatMe {
float:left;
width:100%;
}
#collapsible_buttons li{
margin-bottom: 10px;
}
.hidden_content {
background: yellow;
color: black;
padding: 10px 30px;
display: none;
width: 350px;
float:left;
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>关于jquery - 如何使用jquery从右向左滑动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43608891/