如何使用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); 
    }); 

});

，请告诉我，我可以做的只能点击标签是幻灯片左侧没有另外两个标签是幻灯片。

来源

2017-04-25 kajal jethva

看到片断低于或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>

来源

2017-04-25 11:19:30

不搜索相邻内容是这种类型，当我点击secound 标签时间切换将关闭。@ Mihai T –

谢谢，bt不能正常工作。@ Mihai T –

现在检查答案或在这里> https://jsfiddle.net/nkjdc92z/4/ –

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

回答

相关问题