Question

我有以下代码。当我隐藏红色div时，我想将蓝色div的宽度设置为100％。任何的想法？我的Javascript代码

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $("#button").toggle(function() {
                $(this).text('Show Content');
            }, function() {
                $(this).text('Hide Content');
            }).click(function(){
                $("#red").slideToggle("slow");
            });
        });
        </script>

我的风格

<style>
        #red {

            width: 50%;
            border: 5px solid red;
            float: left
        }
        .blue {
            float: left;
            border: 5px solid #00F;
        }
        </style>

和我的HTML代码

<a href="#" id="button" class="button_style">Hide content</a> <br/>
<div id="red">Content</div>
<div class="blue">&nbsp;</div>

Answer 1

您使用的切换版本为deprecated: 1.8, removed: 1.9

您正在寻找的陈述可能是

$("#red").next(".blue").css("width","100%");

或者有一个额外的课程并使用.toggleClass("wide");，其中.wide具有所需的宽度

这是我的建议，它从按钮

中删除了不赞成的切换功能

Live Demo

$(function() {
   $("#button").click(function(){
       var $red = $("#red"),
           hiding=$red.is(":visible"), 
           text = hiding?'Show Content':'Hide Content';
       $(this).text(text);
       $red.slideToggle("slow");
       $red.next(".blue").toggleClass("wide");
  });
});

我想你可能想要用动画来代替

Live Demo

$(function() {
   $("#button").click(function(){
       var $red = $("#red"),
           $blue=$("#red").next(".blue"),
           hiding=!$red.hasClass("wide"), 
           text = hiding?'Show Content':'Hide Content';
       $(this).text(text);
       $red.animate({width:(hiding?0:100)+'%'},2000);
       $blue.animate({width:(hiding?100:0)+'%'},2000);
       $red.toggleClass("wide");
   });
});

Answer 2

尝试添加一个分配100％宽度的类。

JS：

$("#red").slideToggle("slow",function(){
    $('.blue').toggleClass('fullWidth')
});

CSS：

.fullWidth{
    width:100%;
}

<强> Fiddle Demo

参考： toggleClass()

Answer 3

根据文字

更改width的{{1}}

试试这个：

div

<强> DEMO

Answer 4

JS：

$(document).ready(function() {
        $("#button").toggle(function() {
            $(this).text('Show Content');
            $("#red").next(".blue").css("width","100%");
        }, function() {
            $(this).text('Hide Content');
            $("#red").next(".blue").css("width","46%");
        }).click(function(){
            $("#red").slideToggle("slow");
        });
    });

CSS：

 #red {

        width: 50%;
        border: 5px solid red;
        float: left
    }
    .blue {
        float: right;
        border: 5px solid #00F;
        width: 46%;
    }

HTML：

<a href="#" id="button" class="button_style">Hide content</a> <br/>
    <div id="red">Content</div>
    <div class="blue">&nbsp;</div>

我认为这就是你想要的。

Demo

当第二个div被jQuery隐藏时，如何将div的宽度设置为100％

4 个答案: