0
votes

Frontière pour arrêter la réduction de la taille en cliquant

Je travaille sur un accordéon. J'ai utilisé JQuery pour l'animation. Lorsque je clique sur la tête de l'accordéon, la bordure contient le + code> diminue en taille. Je veux seulement que le signe plus change et la frontière pour rester la même taille.

p>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="start">
  <div class="acc-main">
    <div class="container">
      <div class="kind">
        <div class="accordion_container">
          <div class="accordion-main">
            <div class="accordion_head"><span class="plusminus" id="plus-1">+</span>Because She Matters
            </div>
            <div class="accordion_body" id="a1" style="display: none;">
              <p class="para-acc"> 
              </p>
            </div>
          </div>
</section>

javascript jquery html css accordion

0 commentaires

3 Réponses :

1
votes

La police utilisée a ses caractères avec une largeur différente, c'est-à-dire que les caractères + et - ont une largeur différente. Donc, lorsqu'ils changent, il affecte la largeur totale du bloc. Vous pouvez le résoudre à l'aide d'une police monospacée, telle que monospace, Courier, Courrier Nouveau ou Console Lucida.

Une autre solution serait définie une largeur code> fixe code> pour le bloc.
Tout d'abord, le code> doit être un élément de blocage. Vous l'ajoutez Affichage: Inline-Block code>. Ensuite, le rembourrage sera considéré comme une largeur totale par défaut, de sorte que vous disposez de 25 pex de rembourrage à gauche et à droite. Votre bloc est environ 72px (quand +), puis vous pouvez ajouter largeur: 22px code> (50px + 22px = 72px Largeur fixe). P>

.plusminus {
  vertical-align: middle;
  background-color: #139c4b;
  color: #fff;
  margin-left: 13px;
  padding: 15px 25px;
  font-size: 36px;
  -webkit-font-smoothing: subpixel-antialiased;
  display: inline-block; /* add this */ 
  width: 22px; /* add this */
}

2 commentaires

Bonjour, merci que cela a fonctionné, je ne peux plus que cliquer sur la frontière plus pour elle pour se transformer en un moins, mais je veux que cela puisse transformer un moins lorsque vous cliquez sur la tête de l'accordéon. CODEPEN.IO/KERV/PEN/KKPPVPO

Heureux que cela fonctionnait pour vous. La frontière est à l'intérieur du .accordion_head , vous pouvez donc migrer la fonction Morph de clic de la bordure de la bordure vers le .accordion_head . Ensuite, lorsque vous cliquez sur la frontière ou l'accordéon, cela changera le plus / moins.


                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Ajoutez le code CSS suivant 
.plusminus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    line-height: 70px;
    box-sizing: border-box;
}

                                

                                                                    
                                    
                                    
                                        1 commentaires
                                        
                                                                                            
                                                    Corrigé, pour vous pour l'aide beaucoup appréciée!                                                
                                                
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    1
 votes
                                
                            
                            
                                
                                     Vous avez déjà ajouté  .acacacer  code> classe à  .Plusmimus  code> Classement de l'accordéon. J'ai ajouté un code supplémentaire  CSS  code> pour le rendre meilleur que vous avez besoin. 
  p> 


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="plusminus"></span>

                                

                                                                    
                                    
                                    
                                        1 commentaires
                                        
                                                                                            
                                                    Merci, ce n'est pas le type d'animation que je cherchais, mais cela a beaucoup aidé aussi.