标签: toggle

使用CSS属性更改元素的背景

我有一个带背景的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)

谢谢你的任何信息.

css jquery toggle background-position

2
推荐指数
1
解决办法
1374
查看次数

jquery:切换兄弟姐妹

我想在这样的列表中切换链接的下一个兄弟,

<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)

jquery toggle siblings

2
推荐指数
1
解决办法
2万
查看次数

如何从jQuery中的另一个函数关闭'toggle'

如果单击div.msg_head,则.msg_row将使用动画向下滑动,这在我的示例中有效.我的问题是我正在尝试编写一个函数,在关闭所点击的第二条消息之前关闭所有消息窗格.

这是一个例子:

http://jsfiddle.net/rZR5y/2/

jquery toggle

2
推荐指数
1
解决办法
161
查看次数

如何淡化切换,使过渡看起来更柔和

我怎么能让切换过渡看起来更柔和?我正在"切换"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)

这是小提琴

jquery fade toggle

2
推荐指数
1
解决办法
698
查看次数

Jquery toggle()在Safari中烦人的闪烁

我在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)

演示

http://jsfiddle.net/DBeg9/

http://www.clapclap.se/test/toggle.html

jquery toggle

2
推荐指数
1
解决办法
2157
查看次数

使用jQuery切换多个DIV

我有三个信息面板(具有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)

jquery toggle

2
推荐指数
1
解决办法
2万
查看次数

在Google Maps API v3中显示/隐藏折线组

我想切换折线组的可见性.在我的文件中,我可以显示/隐藏标记,但是当我尝试对折线执行相同操作时,它只显示/隐藏最后创建的折线.将来我想对我的折线进行分类,只用一种颜色切换折线.但是现在如果有人可以帮我切换所有折线,我会很高兴.我认为问题是循环的.这是我的文件:http: //www.2shared.com/document/C01NN3u5/Polylines.html

感谢你们.

google-maps toggle polyline google-maps-api-3

2
推荐指数
1
解决办法
2595
查看次数

使用jQuery切换元素的属性?

使用jQuery构建树状菜单,我希望它可以访问,所以我使用的是aria属性.我想要做的是在点击/输入时将"aria-expanded"属性从true切换为false.我试过这个,但显然不正确:

$(this).closest('ul').find('> li.tree-parent').toggleAttr( 'aria-expanded', 'true false' );
Run Code Online (Sandbox Code Playgroud)

jquery attributes toggle wai-aria

2
推荐指数
1
解决办法
8024
查看次数

使用jQuery在点击时切换图像

我有两个图像,我需要切换点击图像.

    <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)

这是我到目前为止的地方.

javascript jquery toggle src attr

2
推荐指数
1
解决办法
8万
查看次数

Bootstrap Toggle:将多个复选框的切换状态设置为“关”

我正在使用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')函数,然后它停止下一个代码。 …

javascript checkbox jquery toggle twitter-bootstrap

2
推荐指数
1
解决办法
6265
查看次数