Question

我想使用按钮切换div的宽度。我不确定如何正确使用if-else语句检查CSS，我也不清楚语法。

我们假设我有以下内容：

CSS

.firstDiv {
    border:1px solid black;
    padding:10px;
    width: 80px;
    margin:5px;
    display:relative;
}

HTML

<button id="boxToggle">Change Width</button>
<div class="firstDiv">
    <p>This is a paragraph.</p>
</div>

的JavaScript

$("#boxToggle").click(function () {
    $("#firstDiv").css("width", "120px");
});

现在，JavaScript只会更改一次宽度而不会再返回，但这仍然无法正常工作，我假设我的语法错误。

上面的JSFiddle可以在链接中找到。

https://jsfiddle.net/647ye1pk/

感谢任何帮助。

Answer 1

您可以使用toggleClass来达到此效果

＆＃13;

//I need an "if-else" statement in here, but I'm not sure how to use css as a condition
$("#boxToggle").click(function () {
    $(".firstDiv").toggleClass('largeWidth');
});

＆＃13;

.firstDiv {
    border:1px solid black;
    padding:10px;
    width: 80px;
    margin:5px;
    display:relative;
}

.largeWidth{
    width:120px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="boxToggle">Change Width</button>
<div class="firstDiv">
    <p>This is a paragraph.</p>
</div>

＆＃13;

如果您不想使用toggleClass方法，请尝试使用此

＆＃13;

//I need an "if-else" statement in here, but I'm not sure how to use css as a condition
click = 0;
$("#boxToggle").click(function () {
    if (click == 0) {
        $(".firstDiv").css("width", "120px");
        click = 1;
    } else {
        $(".firstDiv").css("width", "80px");
        click = 0;
    }
});

＆＃13;

.firstDiv {
    border:1px solid black;
    padding:10px;
    width: 80px;
    margin:5px;
    display:relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button id="boxToggle">Change Width</button>
<div class="firstDiv">
    <p>This is a paragraph.</p>
</div>

＆＃13;

Answer 2

firstDiv是一个不是id的类（#vs。）试试：

$("#boxToggle").click(function () {
    $(".firstDiv").css("width", "120px");
});

Answer 3

可以像点击按钮时检测div的宽度一样简单，并做出适当的反应：

$("#boxToggle").click(function() {
  var fd = $("#firstDiv");
  if(fd.css("width")!=="120px")
    fd.css("width", "120px");
  else
    fd.css("width", "80px");
});

#firstDiv {
  border: 1px solid black;
  padding: 10px;
  width: 80px;
  margin: 5px;
  display: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="boxToggle">Change Width</button>
<div id="firstDiv">
  <p>This is a paragraph.</p>
</div>

通过这个，你不需要使用全局变量和切换函数。

Answer 4

你可以用这个

$("#boxToggle").click(function () {
    var width=$(".firstDiv").css( "width" );
    if (width=="80px") 
    {
        $(".firstDiv").css("width","120px");
    }
    else
    {
        $(".firstDiv").css("width","80");
    }

使用Jquery

4 个答案: