Question

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

事实上，我实际上正试图找出如何显示或隐藏所有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");
                }
            );
        });
    });

Answer 1

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

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

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

Answer 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：

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

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

另请注意，另一个选项.toggle()会变为.toggleClass()。

jQuery手动切换不起作用

2 个答案: