Question

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

你好！我喜欢让所有三个横幅都有效，但只有顶部有效。知道这有什么问题吗？

This is what is look like on web

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

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

Answer 1

 <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的第一个项目。

首先，我们将id替换为class。

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

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

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

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

1 个答案: