只有顶部按钮向下滑动工作CSS jquery

only top button sliding down works css jquery

本文关键字：工作 CSS jquery 顶部 按钮      更新时间：2023-09-26
 <%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
 <!DOCTYPE html>
 <html>
 <head>
     <style>
         #Slider {
         }
         #Actual {
             background: silver;
             color: White;
             padding: 20px;
         }
         .slideup, .slidedown {
             max-height: 0;            
             overflow-y: hidden;
             -webkit-transition: max-height 0.8s ease-in-out;
             -moz-transition: max-height 0.8s ease-in-out;
             -o-transition: max-height 0.8s ease-in-out;
             transition: max-height 0.8s ease-in-out;
         }
         .slidedown {            
             max-height: 60px ;                    
         }    
     </style>
   </head>
   <body>
 <%
    for(int i=0;i<3;i++){
 %>  
     <div class="container" style="padding: 40px">
       <a id="Trigger">Trigger Slideup/SlideDown</a>
       <div id="Slider" class="slideup">
       <div id="Actual">
                 Hello World Text
             </div>
       </div>
     </div>
 <%} %>
     <script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
     <script>
         $("#Trigger").click(function () {
           $("#Slider").toggleClass("slidedown slideup");
           //  if ($("#Slider").hasClass("slideup"))
           //    $("#Slider").removeClass("slideup").addClass("slidedown");
           //  else
           //      $("#Slider").removeClass("slidedown").addClass("slideup");
         });
     </script>
   </body>
 </html>

嗨伙计们!我喜欢让所有三个横幅工作，但只有顶部的一个工作。知道这有什么问题吗?

这是web上的样子

--------------------------------------------------------------------------------

文本

* * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本* * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本* * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本文本* * * * * * * * * * * * * * * * * *文本* * * * * * * * * * * *文本* * * v 

 <div class="container" style="padding: 40px">
   <a id="Trigger">Trigger Slideup/SlideDown</a>
   <div id="Slider" class="slideup">
   <div id="Actual">
             Hello World Text
         </div>
   </div>
 </div>

您的每个横幅将具有id的Trigger Slider Actual元素(每个三个)。id属性在文档中应该有一个惟一的值。jQuery将选择具有给定id的第一个项目。

首先用class代替id。

$(this).siblings(".Slider")是为了确保我们选择了Slider在同一个容器中，Target在

$(".Trigger").click(function () {
  $(this).siblings(".Slider").toggleClass("slidedown slideup");;
});
.slideup { background-color: red }
.slidedown { background-color: gold }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="padding: 40px">
   <a class="Trigger">Trigger Slideup/SlideDown</a>
   <div class="Slider slideup">
   <div class="Actual">
             Hello World Text
         </div>
   </div>
</div>
<div class="container" style="padding: 40px">
   <a class="Trigger">Trigger Slideup/SlideDown</a>
   <div class="Slider slideup">
   <div class="Actual">
             Hello World Text
         </div>
   </div>
</div>
<div class="container" style="padding: 40px">
   <a class="Trigger">Trigger Slideup/SlideDown</a>
   <div class="Slider slideup">
   <div class="Actual">
             Hello World Text
         </div>
   </div>
</div>

注意:我是在改变颜色而不是上下滑动

相关文章：