Je veux basculer la largeur d'une div à l'aide d'un bouton. Je ne sais pas comment utiliser correctement une instruction if-else pour vérifier le CSS, et je ne suis pas clair non plus sur la syntaxe.

Supposons que j'ai les éléments suivants:

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

À l'heure actuelle, le JavaScript ne modifierait la largeur qu'une seule fois et ne reviendrait pas en arrière, mais cela ne fonctionne toujours pas et je suppose que ma syntaxe est incorrecte.

Un JSFiddle de ce qui précède peut être trouvé sur le lien.

https://jsfiddle.net/647ye1pk/

Toute aide est appréciée.

1
Zared619 17 juil. 2015 à 19:13

4 réponses

Meilleure réponse

Vous pouvez utiliser toggleClass pour obtenir cet effet

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

Et si vous ne voulez pas utiliser la méthode toggleClass essayez ceci

//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>
6
Akshay 17 juil. 2015 à 16:16

Vous pouvez l'utiliser

$("#boxToggle").click(function () {
    var width=$(".firstDiv").css( "width" );
    if (width=="80px") 
    {
        $(".firstDiv").css("width","120px");
    }
    else
    {
        $(".firstDiv").css("width","80");
    }
0
Code Warrior 17 juil. 2015 à 16:28

Cela peut être aussi simple que de détecter la largeur de votre div lorsque vous cliquez sur le bouton et de réagir de manière appropriée:

$("#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>

Grâce à cela, vous n'avez pas besoin d'utiliser des variables globales et des fonctions de basculement.

0
Armfoot 17 juil. 2015 à 16:22

FirstDiv est une classe et non un id (# vs.) essayez:

$("#boxToggle").click(function () {
    $(".firstDiv").css("width", "120px");
});
0
ztukaz 17 juil. 2015 à 16:20