我有一个带背景的div,我想在点击时改变背景的位置.
这是我的jQuery片段:
$('#sprite').click(function() {
$(this).css('backgroundPosition','-40px');
});
Run Code Online (Sandbox Code Playgroud)
虽然这工作正常,但我想通过"第二次"点击返回到原始位置,重置所有.
嗯,这就是所谓的"回调"吗?
我试过这样但它不起作用:
$('#sprite').click(function() {
$(this).css('backgroundPosition','-40px');
},
function() {
$(this).css('backgroundPosition','40px');
}
);
Run Code Online (Sandbox Code Playgroud)
谢谢你的任何信息.
我想在这样的列表中切换链接的下一个兄弟,
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a>
<ul class="selected">
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
<li><a href="#">2.3</a></li>
</ul>
</li>
<li><a href="#">3</a></li>
<li><a href="#">4</a>
<ul class="selected">
<li><a href="#">4.1</a></li>
<li><a href="#">4.2</a></li>
<li><a href="#">4.3</a></li>
</ul>
</li>
<li><a href="#">5</a></li>
</ul>
Run Code Online (Sandbox Code Playgroud)
这是我的jquery,
$(document).ready(function(){
$("a").each(function () {
if ( $(this).siblings().size() > 0)
{
$(this).append("<span class='has-child'>has child</span>");
$(this).toggle(
function (){
$("ul").removeClass("showme");
$(this).siblings(".selected").addClass("showme");
//$(this).next().css({display: "block"});
},
function (){
$(this).siblings(".selected").removeClass("showme");
//$(this).next().css({display: "none"});
});
}
});
$('ul > li > ul > li:last-child > a').css('background','yellow');
});
Run Code Online (Sandbox Code Playgroud)
css,
ul > li > ul { …Run Code Online (Sandbox Code Playgroud) 如果单击div.msg_head,则.msg_row将使用动画向下滑动,这在我的示例中有效.我的问题是我正在尝试编写一个函数,在关闭所点击的第二条消息之前关闭所有消息窗格.
这是一个例子:
我怎么能让切换过渡看起来更柔和?我正在"切换"2个div:
$(document).ready(function(){
var tweet = $("ul.tweets li");
tweet.hover(function(){
$(this).find('.a').toggle()
.end().find('.b').toggle();
});
});
Run Code Online (Sandbox Code Playgroud)
这是小提琴
我在Safari中进行简单的切换时遇到了一些问题.在隐藏动画结束时真的很烦人的闪烁.任何人?
CSS
#menu {
position:absolute;
left: 30px;
top: 30px;
padding: 30px;
background: #FF0;
}
#content {
width: 400px;
display: none;
}
Run Code Online (Sandbox Code Playgroud)
使用Javascript
$(document).ready(function() {
$('#menu').click(function() {
$('#content').toggle(700);
});
});
Run Code Online (Sandbox Code Playgroud)
演示
我有三个信息面板(具有ID的div panel-one,panel-two以及panel-three所有类的div info-panel),我希望在点击链接时滑入和滑出(这些具有ID toggle-one,toggle-two以及toggle-three所有类别toggle).如果其中一个div在单击其中一个链接时显示,我想隐藏可见的div并显示新的div.如果单击div自己的链接,我想切换显示/隐藏.我正在使用以下代码执行此操作:
HTML:
<ul>
<li><a id="toggle-one" class="toggle">One</a></li>
<li><a id="toggle-two" class="toggle">Two</a></li>
<li><a id="toggle-three" class="toggle">Three</a></li>
</ul>
<div id="panel-one" class="info-panel"><!-- content here --></div>
<div id="panel-two" class="info-panel"><!-- content here --></div>
<div id="panel-three" class="info-panel"><!-- content here --></div>
Run Code Online (Sandbox Code Playgroud)
jQuery的:
$("#toggle-one").click(function () {
if($("#panel-two").is(":visible")) {
$("#panel-two").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
} else if($("#panel-three").css("z-index", "9997").is(":visible")) {
$("#panel-three").css("z-index", "9997").hide("slide", {direction: 'up'}, 750);
}
$("#panel-one").css("z-index", "9998").toggle("slide", {direction: 'up'}, 750);
return false;
});
$("#toggle-two").click(function () { …Run Code Online (Sandbox Code Playgroud) 我想切换折线组的可见性.在我的文件中,我可以显示/隐藏标记,但是当我尝试对折线执行相同操作时,它只显示/隐藏最后创建的折线.将来我想对我的折线进行分类,只用一种颜色切换折线.但是现在如果有人可以帮我切换所有折线,我会很高兴.我认为问题是循环的.这是我的文件:http: //www.2shared.com/document/C01NN3u5/Polylines.html
感谢你们.
使用jQuery构建树状菜单,我希望它可以访问,所以我使用的是aria属性.我想要做的是在点击/输入时将"aria-expanded"属性从true切换为false.我试过这个,但显然不正确:
$(this).closest('ul').find('> li.tree-parent').toggleAttr( 'aria-expanded', 'true false' );
Run Code Online (Sandbox Code Playgroud) 我有两个图像,我需要切换点击图像.
<img id='arrowRotate' src='images/prof_arrow1.png' data-swap='images/prof_arrow.png'
data-src='images/prof_arrow1.png' />
Run Code Online (Sandbox Code Playgroud)
当用户单击图像时,src应该获取值,data-swap当您再次单击时,src应该更改为data-src.这应该像切换一样继续发生.任何帮助赞赏.
$("#arrowRotate").click(function() {
var swapImage = $("#arrowGrey").attr("data-swap");
$("#arrowGrey").attr({
'src': swapImage,
id: 'arrowOrange'
});
});
Run Code Online (Sandbox Code Playgroud)
这是我到目前为止的地方.
我正在使用Bootstrap Toggle插件,它将复选框转换为切换按钮。
<input type="checkbox" id="c1" data-toggle="toggle" data-on="Enabled" data-off="Disabled" data-size="small" data-onstyle="success">
<input type="checkbox" id="c2" data-toggle="toggle" data-on="Style" data-off="Style" data-size="small" data-onstyle="success">
<input type="checkbox" id="c3" data-toggle="toggle" data-on="Border" data-off="Border" data-size="small" data-onstyle="success">
Run Code Online (Sandbox Code Playgroud)
它运作良好,但是在关闭复选框状态(未选中)方面存在问题。
就像我们在复选框上使用的一样:
$("#c1,#c2,#c3").prop('checked', false);
Run Code Online (Sandbox Code Playgroud)
根据文档,Bootstrap Toggle插件使用功能“关”来关闭,但这不起作用:
$("#c1,#c2,#c3").bootstrapToggle('off');
Run Code Online (Sandbox Code Playgroud)
而
$("#c1,#c2,#c3").bootstrapToggle('disable');
Run Code Online (Sandbox Code Playgroud)
工程并禁用所有三个复选框。
但是我不想禁用它,只需以编程方式关闭所有切换按钮即可。尝试使用每行单独的代码:
$("#c1").bootstrapToggle('off');
$("#c2").bootstrapToggle('off');
$("#c3").bootstrapToggle('off');
Run Code Online (Sandbox Code Playgroud)
但是只有一个(第一个元素)被关闭,之后我的下一个脚本停止了。
聚苯乙烯
我在另一个函数中使用此off函数:
function reset_all(){
// other fields resets
// input default values to reset
// hide select options & other fields
$("#c1,#c2,#c3").bootstrapToggle('off');
}
Run Code Online (Sandbox Code Playgroud)
单击重置按钮即可工作:
$('#btnReset').on("click",function(e){
e.preventDefault();
reset_all();
// alert message display
//
});
Run Code Online (Sandbox Code Playgroud)
插件中有一些错误吗?或我的代码有问题!
我只是想知道此功能在复选框打开时有效,但是在这些复选框已处于关闭状态时停止工作。
即复选框设置为打开时关闭,但是当它们已经关闭时,我运行bootstrapToggle('off')函数,然后它停止下一个代码。 …
toggle ×10
jquery ×9
javascript ×2
attr ×1
attributes ×1
checkbox ×1
css ×1
fade ×1
google-maps ×1
polyline ×1
siblings ×1
src ×1
wai-aria ×1