Question

我正面临使用JQuery进行DIV点击的问题。需要就此问题提出建议。

我的html中有三个DIV元素，如下所示，

<html>
<body>
<div id="overviewContainer">
    <div id="firstContainer"></div>
    <div id="secondContainer"></div>
</div>
</body>
</html>

我的要求是，

1）当我点击 firstContainer 时， secondContainer 必须消失，我的 firstContainer 应该展开并占据的空间secondContainer

2）当我再次点击 firstContainer 时，必须出现 secondContainer ，我的 firstContainer 应缩小到原始位置并留出空间 secondContainer

为此，我编写了以下jQuery代码

$(function() {
        var firstContainerMaximized = false;
        alert("Jquery invoked");    
            $('#firstContainer').click(function(e) {
                //var firstContainerMaximized = firstContainerMaximized;
                        alert("fist container clicked");
                        if( firstContainerMaximized == false ) {
                            alert("maximizing clicked");
                            firstContainerMaximized = true;
                            $('#secondContainer').hide(); //hide the 2nd container.
                            $(this).css({ //modify the 1st container
                                "right":"1%"                    
                            });
                        } else if( firstContainerMaximized == true ) {
                            alert("minimizing clicked");
                            firstContainerMaximized == false;
                            $('#secondContainer').show(); //show the 2nd container.
                            $(this).css({ //modify the 1st container
                                "right":"49%"                   
                            });
                        }
            });

            $('#secondContainer').click(function(e) {  
                        alert("second container clicked");
                });
        });

逻辑适用于前2次点击。也就是说，当我第一次单击 firstContainer 时，变量 firstContainerMaximized 设置为 FALSE ，我的 firstContainer 扩展为预期

当我第二次点击 firstContainer 时，变量 firstContainerMaximized 设置为TRUE，我的 firstContainer 按预期收缩。

但是当我从第3次开始点击 firstContainer 时，变量 firstContainerMaximized 始终设置为 TRUE 。它没有按预期再次扩张。

请告知我在哪里出错？

有没有其他可供选择的设计来满足我的要求？

Answer 1

如果你使用jQuery .bind（）并通过添加和删除.class

来控制'扩展内容'，这将更容易和更清洁

所以你最终会得到像这样的东西

HTML

<body>
<div id="overviewContainer">
    <div id="firstContainer">first container</div>
    <div id="secondContainer">second container</div>
</div>
</body>

CSS

#firstContainer{
    background: orange;
    padding: 20px;
    height: 50%;
}
#secondContainer{
    background: green;
    padding:20px;
    height: 50%;
}
#overviewContainer{
    background: red;
    height: 200px;
}
#firstContainer.maximized{
    height:100%;
}

JAVASCRIPT

$('#firstContainer').bind('click',function(e) {
    var $firstContainer = $(this);
    var $secondContainer = $('#secondContainer');
    var $firstContainerMaximized = $('#firstContainer.maximized');
    if( $firstContainerMaximized.length == 0 ) {                        
        $secondContainer.hide(); //hide the 2nd container.
        $firstContainer.addClass('maximized');
    } else {
        $secondContainer.show(); //show the 2nd container.
        $firstContainer.removeClass('maximized');
    }
});
$('#secondContainer').click(function(e) {  
    alert("second container clicked");
});

这里还有a link小提琴工作代码。我决定添加一些CSS以便更容易看到。

ps：Javascript仍然可以简化。

我希望它有所帮助：）

Answer 2

正如@kellycode指出的那样，您没有使用赋值运算符=，而是使用条件运算符==，其值为true或false

因此，请将firstContainerMaximized == false;更改为firstContainerMaximized = false;

Answer 3

那是因为你没有正确设置firstContainerMaximized变量。纠正它，它会工作。

问题：firstContainerMaximized == false;
解决方案：firstContainerMaximized = false;

DIV使用JQuery点击

3 个答案: