标签: slidetoggle
使用jQuery slideToggle一组Table Rows
我是javaScript和jQuery的新手,所以希望这将是一个快速解决方案.我需要显示一个包含数据的表格,这些数据可以分为几个类别,我想实现一个slideToggle,它隐藏/显示每个给定类别中的所有观察结果.
下面的代码应该(理想情况下)显示一个包含4列和9行的表,每组3行,前面是绿色的"Section i"行.我希望每个Section标头都可以作为一个slideToggle来扩展或折叠它下面的所有行.现在,没有任何东西在崩溃.有什么想法吗？
<head>
<style type="text/css">
td{padding:5px;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(this).next(".section").slideToggle();
});
});
</script>
</head>
<body>
<p>
<table id="main_table">
<thead>
<tr class="firstline">
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
</thead>
<tbody>
<tr style="background-color:green; color:white">
<td colspan="4" class="flip"> Section 1 </td>
</tr>
<div class="section">
<tr>
<td>item 111</td>
<td>item 112</td>
<td>item 113</td>
<td>item 114</td>
</tr>
<tr>
<td>item 121</td>
<td>item 122</td>
<td>item 123</td>
<td>item 124</td>
</tr>
<tr>
<td>item 131</td>
<td>item 132</td>
<td>item 133</td>
<td>item 134</td>
</tr>
</div>
<tr style="background-color:green; color:white"> …推荐指数
解决办法
查看次数
Angular指令和Jquery slideToggle函数实现
使用angular和jquery我实现了slideToggle函数.为了只将这个函数应用于一个特定的HTML元素,我在ng-click函数中使用了一个参数,我的代码工作正常但是,我想知道是否存在另一种更好的方法来实现angular中的指令和ng-click函数:
的index.html
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="MainController">
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="css/styles.css"/>
</head>
<body>
<div>
<input type="button" ng-click="toggle('first')" value="Toggle First">
<input type="button" ng-click="toggle('second')" value="Toggle Second">
<input type="button" ng-click="toggle('third')" value="Toggle third">
<div class="div1" section="first" toggle="first" >
<p>This is section #1</p>
</div>
<div class="div1" toggle="second">
<p>This is another section #1</p>
</div>
<div class="div1" toggle="third">
<p>This is 3 section #1</p>
</div>
</div>
</body>
<footer>
<script src="js/jquery.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/directives.js"></script>
</footer>
</html>
styles.css的
.div1 {
background: Brown;
width: 200px;
height: 200px;
text-align: …推荐指数
解决办法
查看次数
为什么我的JQuery淡入滑块不适用于任何IE类型？
我的JQuery滑块在IE中不起作用(在任何文档模式中).我怎么能解决这个问题？按下按钮后,我的代码会向下滑动一段文本(它也很好地淡入).IE控制台给我这个错误:"Object doesn't support property or method 'fadingSlideToggle'".
(function ($) {
$.fn.fadingSlideToggle = function ($el, options) {
var defaults = {
duration: 500,
easing: 'swing',
trigger: 'click'
};
var settings = $.extend({}, defaults, options)
$selector = $(this).selector;
return this.each(function () {
var $this = $(this);
$(document).on(settings.trigger, $selector, function (e) {
e.preventDefault();
if ($($el).css('display') == 'none') {
$($el).animate({
opacity: 'toggle',
height: 'toggle'
}, settings.duration, settings.easing);
} else {
$($el).animate({
opacity: 'toggle',
height: 'toggle'
}, settings.duration, settings.easing);
}
});
});
};
})(jQuery); …推荐指数
解决办法
查看次数
使用jquery扩展和折叠表行(tr)
我有一个包含有效和无效项目的表格.此表是从数据库动态填充的.我正在尝试为我的表中的非活动项添加切换并显示所有活动项.我的意思是我想显示所有活动项目并在我的表格中仅滑动切换非活动项目.
<div class="alertsList">
<table width="100%">
<tbody>
<tr>
<th></th>
<th>Id</th>
<th>From</th>
<th>Action</th>
<th>State</th>
<th>time</th>
<tr class="alertRow">
<td></td>
<td>1025973</td>
<td>SYSTEM</td>
<td>false</td>
<td class="Active">Active</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="Active">Active</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="InActive">InActive</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="InActive">InActive</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="Active">Active</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
</tbody>
</table>
</div>
$('.alertRow.InActive').Parent.click(function () {
$(this).nextUntil('tr.td.InActive').slideToggle(1000);
});
我怎样才能做到这一点..？
推荐指数
解决办法
查看次数
在IE7中使用jquery slideToggle时内容消失
我已经多次看到这个问题,但没有看到任何答案.
我有一个ul,我正在使用带有jquery的slideToggle()进行扩展和折叠.代码很简单:
$('#leftMenu li a.moreLess').click(function() {
$(this).next().slideToggle('normal');
});
标记为:
<a class="moreLess">Click here to see more</a>
<ul>
<li>something</li>
<li>something else</li>
...
</ul>
我有一个带有.moreLess类的按钮,当点击下面的列表时,它应该展开或折叠.由于某些原因,在IE 7中,一旦列表完全展开,所有内容都将消失.当它崩溃时,内容会再次出现,直到列表完全关闭.
我不确定这是否与CSS相关,但我希望有人可能会遇到此问题.在此先感谢您的帮助!
推荐指数
解决办法
查看次数
jQuery中生涩动画的问题
我做了很多次没有问题,但由于某种原因,这是一个问题在这里.向下滑动将开始正常工作(1/3),而不是突然的一切,并完成动画.向上滑动工作正常.如果我也在动画函数中切换不透明度它不会抖动但我的文本会短暂地改变颜色,这就是幻灯片幻灯片(),幻灯片切换和.animate()的情况.
HTML:
<h2>Phthalate Free: </h2><div class="yamikowebsToggler">
<p>
Dibutyl Phthalate is linked to cancer and is present in nail polish, perfume, soft plastics and skin care products.
</p></div>
CSS:我读到其他的是边缘可能导致抽搐,但这没有帮助
h2{color:#76DEFC; margin:0px;}
.yamikowebsToggler{margin:0px;}
p{margin:0px; color;#000000;}
JQUERY:
$(document).ready(function(){
$(".yamikowebsToggler").fadeOut(0);
$("h2").click(function()
{
$(this).next(".yamikowebsToggler").stop(true, true).animate(
{ height: 'toggle' },
{
duration: 1000,
});
})
});
推荐指数
解决办法
查看次数
点击时滑动面板跳回家
我在1页的网站上制作了一个垂直滑动面板(点击右上角的psssst).总而言之,它工作得很好,它可以正常上下滑动(滑动时按钮上仍然有点凹凸,但没有任何重量).
问题是当您向右滚动然后单击滑动面板时它会跳回到页面的开头.
我该如何解决/阻止这种情况？你可以在这里查看问题:http://www.basenharald.nl/3d
提前致谢!
推荐指数
解决办法
查看次数
jQuery slideToggle函数将div向下滑动然后立即备份
我有一个非常简单的幻灯片切换功能,如下所示.
$(".quickLinksLink").click(function () {
$(".quickLInksList").slideToggle(100);
});
它可以工作,但它会将quickLInksList div向下滑动然后立即备份.有点像peeka boo效果.这种情况发生在使用slideToggle函数的任何地方.
任何帮助将不胜感激.
推荐指数
解决办法
查看次数
如何防止jQuery函数重复？
我有一个简单的jQuery函数
$('.button').click(function(){
$("#target").slideToggle().load('http://page');
});
按slideToggle行为,每次点击都会导致幻灯片,但问题是它会url再次加载.
如何限制load()只执行一次的功能,但slideToggle()每次点击都要限制.换句话说,如何load()在后续点击中防止(仅加载,而不是整个功能)？
推荐指数
解决办法
查看次数
SlideToggle和Callback,我做错了什么还是这个bug？
我有一个带有四个项目按钮的页面,当用户点击这些按钮时,内容应该是slideDown.
如果它已经是可见内容,则必须将该内容滑出,然后将正确的内容向下滑动.
一切正常,但如果用户在项目按钮之间快速点击,幻灯片就会卡住并开始出现在其他内容之上.
这是一个例子:http: //jsfiddle.net/7t6Eh/42/
如果用户点击项目之间的"慢",一切正常.
- 重新创建错误单击项目按钮之间的快速.
我已经尝试使用'.is(":visible")'但得到了相同的结果.
谁能帮我吗？
码
var active = 0;
$("#item1").click(function(){
if (active == 0){
$("#ContentList1").stop().slideToggle(function() {
active = 1;
});
} else {
if (active != 1){
$("#ContentList" + active).stop().slideToggle(function() {
$("#ContentList1").stop().slideToggle(function() {
active = 1;
});
});
}
}
});
$("#item2").click(function(){
if (active == 0){
$("#ContentList2").stop().slideToggle(function() {
active = 2;
});
} else {
if (active != 2){
$("#ContentList" + active).stop().slideToggle(function() {
$("#ContentList2").stop().slideToggle(function() {
active = 2;
});
});
}
}
}); …推荐指数
解决办法
查看次数
标签 统计
jquery ×10
slidetoggle ×10
javascript ×5
css ×2
html-table ×2
slidedown ×2
angularjs ×1
callback ×1
click ×1
html ×1
load ×1
slide ×1
slideup ×1