使用Jquery切换Div的宽度

扎雷德619

我想使用按钮切换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/

任何帮助表示赞赏。

阿克沙伊

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

//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');
});

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

.largeWidth{
    width:120px;
}

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

如果您不想使用该toggleClass方法，请尝试以下操作

//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;
    }
});

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。