Come trasformo questa funzione jQuery in un'istruzione 'if'

Question

In questo momento sto provando a scrivere una funzione jquery che mi consente di espandere un div quando fai clic su di esso, quindi di tornare alla sua dimensione iniziale quando fai nuovamente clic su di esso. .

Ho provato ad aggiungere un pulsante per farlo ritirare, ma perché quando clicco lo script pensa che sto anche facendo clic sul div padre e si espande di nuovo. Idealmente, mi piacerebbe farlo senza avere un pulsante.

Il codice che ho è qui -

(jsfiddle): https://jsfiddle.net/Nikf/wykL6u7u/9/

<div class="grid"> 
     <div class="block" id="block1"> 
      <button class="retractor" id="ret1">back</button> 
     </div> 
     <div class="block" id="block2">2</div> 
     <div class="block" id="block3">3</div> 
     <div class="block" id="block4">4</div> 
     <div class="block" id="block5">5</div> 
     <div class="block" id="block6">6</div> 
</div> 

CSS

*{ 
    margin: 0; 
    padding: 0; 
} 

html, body{ 
    width: 100%; 
    height: 100%; 
} 

.grid{ 
    width: 100%; 
    height: 100%; 
    /*background-color: #114411;*/ 
} 

.block{ 
    width: 33.3%; 
    height: 50%; 
    float: left; 
    color: #FFFFFF; 
    position: relative; 
} 

.retractor{ 
    width: 50px; 
    height: 50px; 
    padding: 10px 0; 
    text-align: center; 
    background-color: #FF0000; 
    color: #FFFFFF; 
    font-family: 'Open Sans', sans-serif; 

    position: absolute; 
    bottom: 30px; 
    right: 30px; 
} 

#block1{ 
    background-color: #222222; 
}   

#block2{ 
    background-color: #999999; 
}   

#block3{ 
    background-color: #5555555; 
}   

#block4{ 
    background-color: #999999; 
} 

#block5{ 
    background-color: #333333; 
}  

#block6{ 
    background-color: #CCCCCC; 

Script

$('#block1').click(function(){ 
    $('#block1').animate({ 
     width: '100%', 
     height: '100%' 
    }); 
}); 

$('#block1').click(function(){ 
    $('#block1').animate({ 
     width: '33.3%', 
     height: '50%' 
    }); 
}); 

Answer 1

È possibile utilizzare jQuery toggleClass in combinazione con le transizioni CSS per ottenere lo stesso risultato. Controlla https://jsfiddle.net/wykL6u7u/11/ e vedi se ciò soddisfa le tue esigenze.

quello che ho fatto:

.block { 
    width: 33.3%; 
    height: 50%; 
// ... 
    transition: all 1s; 
} 

.block.expanded { 
    width: 100%; 
    height: 100%; 
    transition: all 1s; 
} 

E il JS è solo la leva classe:

$('#block1').click(function(){ 
     $(this).toggleClass("expanded"); 
}); 

Answer 2

Io suggerisco di usare "toggleClass" e basandosi su classi CSS anziché CSS hard-coded valori. D'accordo con @ sebastian-wramba

Il fatto è che non abbiamo davvero bisogno del pulsante Indietro qui. L'ho portato fuori con la consapevolezza che op preferirebbe non essere lì ma che il clic sul div do l'interruttore. Feedback benvenuto se non sto leggendo i requisiti correttamente.

https://jsfiddle.net/e15kxkdr/3/

<div class="grid"> 
     <div class="block" id="block1">1</div> 
     <div class="block" id="block2">2</div> 
     <div class="block" id="block3">3</div> 
     <div class="block" id="block4">4</div> 
     <div class="block" id="block5">5</div> 
     <div class="block" id="block6">6</div> 
</div> 

.grid{ 
    width: 100%; 
    height: 100%; 
    /*background-color: #114411;*/ 
} 

.block{ 
    width: 33.3%; 
    height: 50%; 
    float: left; 
    color: #FFFFFF; 
    position: relative; 
} 
.nodisplay { 
    display: none; 

} 

$('.grid').on("click", "div", function(){ 
     $(this).toggleClass("grid") 
     $(this).toggleClass("block") 
     $(this).siblings().toggleClass("nodisplay") 
    }) 

Aggiornamento: Ho cambiato questo per lavorare fuori i bambini del principale elemento "griglia" tramite il jquery "on" sottoelemento piuttosto che utilizzare una classe separata. Poi ho aggiunto una nuova classe "nodisplay" per nascondere gli altri elementi.

Answer 3

Vorrei suggerire di modificare la logica. È più facile se aggiungi una classe specifica e lasci che il CSS faccia l'animazione.

$('.block').click(function(ev){ 
    $(ev.target).toggleClass('active'); 
}); 

In questo modo è possibile rimuovere il pulsante dagli elementi di blocco.

Aggiungere l'animazione e la nuova classe al CSS:

.block{ 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 

.block.active{ 
    width: 100%; 
    height:100%; 
} 

non ho ancora testato questo codice. Spero che funzioni

--EDIT--

ev.target non è un elemento jQuery. L'ho avvolto in $ (ev.target) altrimenti non ce l'aveva.toggleClass();

Answer 4

Prova questo:

$(document).ready(function(){ 
    var expand = true; 
    $('#block1').click(function(){ 
     var width='33.3%', height="50%"; 
     if(expand){ 
      width='100%'; 
      height='100%'; 
      expand=false; 
     }else{ 
      expand=true; 
     } 
     $('#block1').animate({ 
      width: width, 
      height: height 
     }); 
    }); 

}); 

Answer 5

Prova memorizzare valori in una matrice, utilizzando Array.prototype.reverse()

Credo @BillGarrison sia corretto. Senza spiegazione non è ovvio come funziona il codice.

Spiegazione:

Approccio è una procedura "toggle". Utilizzare il valore a arr[0] per un processo; invertire arr; utilizzare il valore a arr[0] per il processo successivo; invertire arr.

L'approccio potrebbe essere implementato senza utilizzare Array.prototype.reverse(); utilizzando 0 e 1, undefined; vedi Has .toggle() been deprecated in the latest jQuery releases?.

L'approccio può anche essere esteso per scorrere, o alternare i valori n in successione, ritornando al valore iniziale una volta che tutti gli elementi dell'array sono stati ripetuti.

var arr = [ 
     ["100%", "100%"], 
     ["33.3%", "50%"] 
    ]; 

    $("#block1").click(function() { 
      $(this).animate({ 
      // at initial click, set `width` to `arr[0][0]` : `100%`, 
      // set `height` to `arr[0][1]` : `100%` 
      // reverse `arr` 
      // at second click `arr[0]` : `["33.3%", "50%"]`; 
      // set `width` to `arr[0][0]` : `33.3%` 
      // set `height` to `arr[0][1]` : `50%`; 
      // repeat procedure 
      width: arr[0][0], 
      height: arr[0][1] 
      }, function() { 
      arr.reverse() 
      }); 
    }) 

jsfiddle https://jsfiddle.net/wykL6u7u/14/

Answer 6

Così, dopo averci pensato su ho fatto in questo modo. Fa 2 calcoli per scoprire la percentuale della larghezza e dell'altezza della griglia e fa un animato basato su quello. L'ho impostato per espandere e contrarre in base al clic della griglia, ma se si desidera utilizzare il pulsante basta cambiare il bind di clic sull'ID pulsanti indietro.

$('.grid').click(function() { 
    var heightPercentage = (100 * parseFloat($('.grid').css('height'))/parseFloat($('.grid').parent().css('height'))) + '%'; 
    var widthPercentage = (100 * parseFloat($('.grid').css('width'))/parseFloat($('.grid').parent().css('width'))) + '%'; 
    var toggleWidth = widthPercentage === "100%" ? "33%" : "100%"; 
    var toggleHeight = heightPercentage === "100%" ? "50%" : "100%"; 
    $('.grid').animate({ 
    width: toggleWidth, 
    height: toggleHeight 
    });  
}); 

https://jsfiddle.net/bgarrison25/o7k2y25q/1