jQuery 切换按钮以展开/折叠 div

Toggle button to expand/collapse divs

提问by user3716388

I have two divs next to each other and would like to use the toggle function to collapse one div (Sidebar) horizontally while expanding the other (Map) to take full width of the former. I would then need the toggle to bring back both divs to their original widths/positions. I can get it to do the first operation but I have no clue on how to do the reverse. See Fiddle:

我有两个相邻的 div，想使用切换功能水平折叠一个 div（侧边栏），同时扩展另一个（地图）以占据前者的全宽。然后我需要切换来将两个 div 恢复到它们原来的宽度/位置。我可以让它做第一个操作，但我不知道如何做相反的操作。见小提琴：

    $(document).ready(function(){
        $("#toggle").click(function(){
            $("#sidebar").animate({width: 'toggle'});
            $("#map").animate({width: '100%'});     
        });
    });

回答by Sridhar R

Try this

尝试这个

HTML

HTML

<input type="button" data-name="show" value="Toggle" id="toggle">

Script

脚本

$(document).ready(function () {
            $("#toggle").click(function () {
                if ($(this).data('name') == 'show') {
                    $("#sidebar").animate({
                        width: '0%'
                    }).hide()
                    $("#map").animate({
                        width: '100%'
                    });
                    $(this).data('name', 'hide')
                } else {
                    $("#sidebar").animate({
                        width: '19%'
                    }).show()
                    $("#map").animate({
                        width: '80%'
                    });
                    $(this).data('name', 'show')
                }
            });
        });

DEMO

演示

回答by Mir

I usually use a second css class that tells the current status of the div. Something like collapsedthat is changed or removed when the div expands, so you can check for this second class to determine what action the user is requesting.

我通常使用第二个 css 类来告诉 div 的当前状态。collapsed当 div 扩展时，类似的东西会被更改或删除，因此您可以检查第二个类以确定用户正在请求什么操作。

Fiddle edited: http://jsfiddle.net/8wKxY/6/

小提琴编辑：http: //jsfiddle.net/8wKxY/6/

Something like this:

像这样的东西：

$(document).ready(function(){
    $("#toggle").click(function(){
        if($(this).hasClass('expanded')){
            $("#sidebar").stop().animate({width: '19%'});
            $("#map").stop().animate({width: '80%'});
            $(this).removeClass('expanded');
        }
        else {
            $("#sidebar").stop().animate({width: '100%'});
            $("#map").stop().animate({width: '100%'});      
            $(this).addClass('expanded');
        }
    });
});

In the example I have attached the control class directly to the button, but it would be more appropriate to attach it to a common container of the two expandable divs.

在示例中，我将控件类直接附加到按钮，但将其附加到两个可扩展 div 的公共容器会更合适。

Also note that you probably need to have an owerflow: hiddenproperty on the sidebar so that it doesn't goes under the map on collapsing. In my example I completely hide the sidebar after the animation finishes.

另请注意，您可能需要owerflow: hidden在侧边栏上有一个属性，以便它在折叠时不会位于地图下方。在我的示例中，我在动画完成后完全隐藏了侧边栏。

回答by Mr_Green

You just need to check whether the div is 100%or 80%.

您只需要检查 div 是100%或80%.

$(document).ready(function () {
    $("#toggle").click(function () {
        $("#sidebar").animate({
            width: 'toggle'
        });
        var value = $("#map")[0].style.width !== "100%" ? '100%' : '80%';
        $("#map").animate({
            width: value
        });
    });
});

Working Fiddle

工作小提琴

回答by Shaunak D

Use jQuery toggleClass()

使用 jQuery toggleClass()

Working Demo

工作演示

$(document).ready(function(){
  $("#toggle").click(function(){
            $("#sidebar").animate({width: 'toggle'});
            $("#map").toggleClass('fullWidth');     
  });
});

---

---

.fullWidth{
    width : 100% !important;
}