jQuery手动切换不起作用答案

【问题标题】：jQuery manual toggle not workingjQuery手动切换不起作用
【发布时间】：2011-01-20 12:51:15
【问题描述】：

我正在尝试创建一个手动切换来隐藏一些 div 标签。但它似乎没有做任何事情。我添加了警报以查看它们是否出现，但无济于事。使用简单的切换（）；功能确实有效。

事实上，我实际上是在尝试弄清楚如何显示或隐藏所有 div。因为目前，如果一些 div 是打开的，而一些 div 是关闭的，使用切换只是交换它们（所以显示的 div 被隐藏，而隐藏的 div 现在显示）。有什么想法吗？

//button to show/hide rows
    $('#hideRows').live('click', function() {
        $('.dragbox').each(function(){
            //$(this).find('.dragbox-content').toggle();
            $(this).find('.dragbox-content').toggle(
                function () {
                    //$(this).css({"display":"none"});
                    alert("hide");
                },
                function () {
                    //$(this).css({"display":"block"});
                    alert("show");
                }
            );
        });
    });

【问题讨论】：

不看相关的 HTML 很难判断。

标签： jquery html toggle

【解决方案1】：

您似乎一遍又一遍地重新绑定伪事件处理程序toggle。试试这个：

$('.dragbox .dragbox-content').toggle(
    function () {
        $(this).css({"display":"none"});
    }, function () {
        $(this).css({"display":"block"});
 });

$('#hideRows').live('click', function() {
    $('.dragbox .dragbox-content').click();
});

【讨论】：

【解决方案2】：

如果你有类似的东西：

<div id='div1'></div>
<div id='div2'></div>
<div id='div3'></div>
<div id='div4'>
    <div id='div5'></div>
</div>

和类似的css：

.hideDiv
{
  display: none;
}

你可以做类似的事情

$('#div1').addClass('hideDiv'); //hides the div
$('#div2').toggle('hideDiv');// toggles hidden or not hidden
$('#div4').children('div').addClass('hideDiv');// hides the child

将它们放入函数、复杂选择器或任何你需要的东西中：

$('#div3').hover(
        function()
        {
            $('#div1').addClass('hideDiv');
        },
        function()
        {
            $('#div1').removeClass('hideDiv');

        }
    );

为了好玩，可以根据另一个 div 的悬停来切换两个 div：

$('#div3').hover( 
        function() 
        { 
            $('#div1').addClass('hideDiv'); 
           $('#div2').removeClass('hideDiv'); 

        }, 
        function() 
        { 
            $('#div1').removeClass('hideDiv'); 
            $('#div2').addClass('hideDiv'); 
        } 
    );

注意另一个选项.toggle() 变成.toggleClass()。

【讨论】：

注意 OP 想要什么？还是我错过了什么？