只有顶部按钮向下滑动才能使用 css jquery
[英]only top button sliding down works css jquery
问题描述
<%@ 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>
Hi guys!
嗨，大家好！ I like to make all three banner work but only top one works.我喜欢让所有三个横幅都起作用，但只有最重要的一个起作用。 any idea what is wrong with this?知道这有什么问题吗？
This is what is look like on web这是网络上的样子
-------------------------------------------------------------------------------- -------------------------------------------------- ------------------------------
***text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text*** ***正文******正文******正文******正文******正文******正文******正文**** **正文******正文******正文******正文******正文******正文******正文***** *正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文* *****正文******正文******正文******正文******正文******正文******正文** ****正文******正文******正文******正文******正文******正文******正文*** ***正文******正文******正文******正文******正文******正文******正文**** **正文******正文******正文******正文******正文******正文******正文***** *正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文* *****正文******正文******正文******正文******正文******正文******正文** ****正文******正文******正文******正文******正文******正文******正文*** ***text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text***v ***正文******正文******正文******正文******正文******正文******正文**** **正文******正文******正文******正文******正文******正文******正文***** *正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文******正文* *****正文******正文******正文******正文******正文******正文******正文** ****正文******正文******正文******正文******正文***v
1 个解决方案
解决方案1
1 已采纳 2016-09-10 22:18:41
<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>
Each of your banners will have elements with id's Trigger Slider Actual (three of each).您的每个横幅都将包含带有 id 的Trigger Slider Actual （每个三个）的元素。 id attribute should have a unique value in the document. id属性在文档中应该有一个唯一的值。 jQuery will select the first item with a given id. jQuery 将选择具有给定 id 的第一项。
First we replace id with class .首先我们用class替换id 。
$(this).siblings(".Slider") is to make sure we are selecting the Slider in the same container the Target is in $(this).siblings(".Slider")是为了确保我们在Target所在的同一个容器中选择Slider
$(".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>
Note: I'm changing color instead of sliding up and down注意：我正在改变颜色而不是上下滑动
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.