如何使用jquery从右向左滑动？_Jquery_Html_Css

如何使用jquery从右向左滑动？

jquery html css

如何使用jquery从右向左滑动？,jquery,html,css,Jquery,Html,Css,我试图在div标签幻灯片中实现三个标签，从右到左，这一次还有两个标签从右到左，那么我能做什么呢？这是我的php代码 <body> <div id="collapsible_section"> <ul id="collapsible_buttons"> <li> <a href="#" class="a">Button A </a>

我试图在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>

这是我的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);
    });

});

请告诉我我能做什么只有点击标签是幻灯片左边没有另外两个标签是幻灯片。

见下面的片段或

您的代码有一些问题

为了获得最佳的性能和简洁的代码，请不要对代码使用多个类同样的元素。例如

.a.aa.aaa

或

.hidden\u content1、.hidden\u content2

等。使用公共类，然后使用不同的选择器选择所需的项目。还有你为所有

s设置相同的样式，但要编写样式3 时代。这不是好的做法。查看更改后的HTML和 CSS

对于jQuery部分，上面的观点是相同的。不要写多个单击功能，但只为所有

和写入一个然后使用按钮选择

.hidden_内容

。因此，您将仅选择单击的

a的相邻内容

.next（）方法允许我们搜索紧跟其后的兄弟

$（“#可折叠按钮a”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
var showMe=$（this.next（.hidden_content））
$（showMe）.toggle（1000）.toggleClass（“showMe”）
$（this.toggleClass（“floatMe”）
$（this）.parents（“li”）.siplines（“li”）.find（“.hidden_content”）.hide（）.removeClass（.showMe”）
$（this）.parents（“li”）.sibbins（“li”）.find（“floatMe”）.removeClass（）
});
html，正文{
保证金：0；
填充：0；
字体系列：arial；
字体大小：13px；
颜色：#000；
背景色：rgb（255、102、102）；
}
#可折叠_段{
位置：绝对位置；
右：0；
顶部：200px；
}
#可折叠按钮{
列表样式：无；
}
#可折叠按钮，#可折叠按钮{
保证金：0；
填充：0；
}
a{
颜色：#fff；
填充：10px 30px；
背景：#000；
文字装饰：无；
最小宽度：100px；
浮动：对；
明确：两者皆有；
显示：块；
}
a、 漂浮物{
浮动：左；
宽度：100%；
}
#可折叠按钮{
边缘底部：10px；
}
.隐藏内容{
背景：黄色；
颜色：黑色；
填充：10px 30px；
显示：无；
宽度：350px；
浮动：左；
明确：两者皆有；
}



标题
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。这是一个小小的节日


标题
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。我们需要一个最低限度的练习


标题
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，我们要尽量少花钱


不是这种类型，当我点击secound标签时，时间切换将关闭。@Mihai Tya谢谢，它会工作的。谢谢你的回答。bt当我点击secound标签时，第一个标签将滑动，然后切换后是滑动，所以我可以为第一个切换做什么@米海蒂不明白。我的代码是这样工作的：点击按钮A。内容滑入。单击按钮B，A中的内容隐藏，B中的内容滑入。等等这不是你想要的吗？当我点击一个按钮时，我该怎么办？同时按钮的宽度也会增加，与隐藏的内容相同？？看这里。将width:100%
添加到a.floatMe
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);
    });

});