wie man mit jquery von rechts nach links gleitet?

Ich versuche, drei Tag in Div-Tag-Folie von rechts nach links zu implementieren und zu dieser Zeit auch zwei weitere Tag-Folie von rechts nach links so was kann ich tun? hier ist mein PHP-Code,wie man mit jquery von rechts nach links gleitet?

<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>

hier CSS-Code ist,

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; 
}

hier ist mein js Code,

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); 
    }); 

});

Bitte sagen Sie mir, was ich nur tun kann für Tag klicken ist Folie links kein anderes zwei Tag ist Folie.

Quelle

2017-04-25 kajal jethva

siehe Schnipsel unten oder jsFiddle

es ein paar Probleme mit Ihrem Code für gleiche Elemente

Für die beste Leistung und präzisen Code keine verwenden, um mehrere Klassen waren. wie oder .hidden_content1,.hidden_content2 usw. Verwenden Sie eine gemeinsame Klasse und dann verwenden Sie verschiedene Selektoren, um die gewünschten Elemente auszuwählen. Auch Sie legen Sie die gleichen Stile zum Beispiel alle a s, aber Sie schreiben die Stile 3 mal. Das ist keine gute Übung. werfen Sie einen Blick auf die geänderte HTML und CSS.

Der obige Punkt ist für den jQuery-Teil derselbe. Schreiben Sie NICHT Mehrfachklick-Funktionen, sondern schreiben Sie stattdessen nur eine für alle a und und wählen Sie dann die .hidden_content unter Verwendung der next() method. Und so werden Sie nur den benachbarten Inhalt des angeklickten a

der .next wählen() -Methode uns durch die unmittelbar folgende Geschwister

$('#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>

Quelle

2017-04-25 11:19:30

nicht suchen können ist dieser typ, wenn ich klicke auf secound tag diese zeit toggle wird in der nähe. @ Mihai T –

Danke, es funktioniert nicht richtig. @ Mihai T –

Überprüfen Sie jetzt die Antwort oder hier> https://jsfiddle.net/nkjdc92z/4/ –

wie man mit jquery von rechts nach links gleitet?

Antwort

Verwandte Themen