La bascule de bascule jQuery ne fonctionne pas

Question

Je crée une liste déroulante avec la fonction jQuery et bascule, car je veux que le sélecteur soit cliquable avec les options de liste déroulante affichées avec une barre de défilement personnalisée.

Jusqu'à présent, j'ai un code comme ceci: JSFiddle

$(".row-span").click(function(){ 
$("#expandDropDown").toggleClass('drop'); 
$("#quantitySelectDrop").toggleClass('active'); 
$(".mCSB_container").mCustomerScrollbar(); 
$(".active-result").hover(function(){ 
$(this).toggleClass('highlighted').siblings().removeClass('highlighted');})}) 

Lorsque le div est cliqué, un menu déroulant avec différentes options seront affichage, en même temps, la flèche sur le sélecteur sera changer de bas en haut quand il est cliqué/basculé. Lorsque la souris survole les options, la couleur d'arrière-plan des options devient grise.

Mon résultat attendu devrait ressembler à ceci:

Mais je ne peux pas pousser le Meun déroulant de -9000px à 0px afin de faire afficher.

Depuis la fonction click, j'ai inclus deux classes de bascule pour déclencher l'action. Cependant, même la classe "active" est ajoutée à la div, la position du menu déroulant n'a toujours pas changé et est apparue.

Je ne suis pas sûr si c'est mon erreur de logique ou je ne devrais pas mettre deux classes de bascule sous une fonction de clic. Comment puis-je déclencher deux changements de bascule sous la même fonction de clic? Je vous remercie!!

Answer 1

D'accord, quelques choses se passent ici.

1. ne lui permit jQuery dans les paramètres JavaScript, donc vous obtenez « $ est pas une fonction » erreurs
2. code était incompatible dans l'orthographe. Certains endroits ont dit «qualité», d'autres endroits ont dit «quantité». En outre, certains endroits ont dit «sélectionner», d'autres endroits ont dit «sélecteur».

EDIT: J'ai oublié de mentionner que j'ai également déplacé vos styles en ligne vers la feuille de style. Vous pourriez avoir du mal à faire en sorte que vos classes remplacent les styles en ligne, donc je le ferais si vous le pouvez. Si ce n'est pas le cas, vous pouvez essayer !important ou utiliser la propriété jQuery .css() pour basculer les styles au lieu de basculer les classes.

Abbreviated jQuery que vous pouvez développer comme vous avez besoin:

$(function(){ 
 
    $('#expandDropDown').click(function(){ 
 
    $('#qualitySelectorDrop').toggleClass('active'); 
 
    $("#expandDropDown").toggleClass('drop'); 
 
    }); 
 
});

#expandDropDown { 
 
    color: blue; 
 
} 
 
#expandDropDown.drop{ 
 
    /*changing the selector arrow from down to up*/ 
 
    color: red; 
 
} 
 
.active-result.highlighted{ 
 
    background-color:red; 
 
} 
 
.mCustomScrollbar { 
 
    width: 38px; 
 
    position: absolute; 
 
    left: -9000px; 
 
} 
 
.mCustomScrollbar.active { 
 
    left: 0; 
 
} 
 
#qualitySelectorDrop { 
 
    left: -9000px; 
 
    width: 59px; 
 
    top: 29px; 
 
    height: 100px; 
 
    background: blue; 
 
    position: absolute; 
 
} 
 
#qualitySelectorDrop.active { 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <a class="row-span" id="expandDropDown" style="width:61px;"> 
 
    <span>Please Select</span> 
 
    <!-- <div><b></b></div> --> 
 
    </a> 
 
</div> 
 

 
<div class="drop-row" id="qualitySelectorDrop"> 
 
    <div class="drop-search"> 
 
    <ul class="drop-result mCustomScrollbar mCS1" tabindex="-1"> 
 
     <div id="mCSB1" class="mCustomScrollBox mCSB_vertical mCSB_5" tabindex="0" style="max-height:130px;"> 
 
     <div id="mCSB1_container" class="mCSB_container" style="position:relative; top:0px; left:0px; overflow:auto;"></div> 
 
      <li class="active-result">1</li> 
 
      <li class="active-result">2</li> 
 
      <li class="active-result">3</li> 
 
      <li class="active-result">4</li> 
 
      <li class="active-result">5</li> 
 
      <li class="active-result">6</li> 
 
      <li class="active-result">7</li> 
 
      <li class="active-result">8</li> 
 
     </div> 
 

 
     <div id="mCSN1_scrollbar_vertical" class="mCSB1_scrollTools mCSB1_scrollbar mCSB1_scrollTools_vertical" style="display:block;"> 
 
     <div class="mCSB_draggerContainer"> 
 
     <div id="mCSB1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height:30px; top:0px; display:block; height:31px; max-height:120px;" oncontextmenu="return false;"> 
 
      <div class="mCSB_dragger_bar" style="line-height:30px"></div> 
 
      <div class="mCSB_draggerRail"></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </ul> 
 
    </div> 
 
</div>

violon de travail est ici: https://jsfiddle.net/59y9jaef/4/

Answer 2

JS Fiddle Code is here

Cela fonctionne violon. Vous étiez en train d'appliquer un mauvais style en tant que position: -900px et essayé d'appliquer et essayé de basculer avec le nom de la classe. N'a pas lié le fichier JQuery JS dans votre violon.

HTML: S'il vous plaît Sélectionnez

<div class="drop-row" id="qualitySelectorDrop" > 

<div class="drop-search"> 
<ul class="drop-result mCustomScrollbar mCS1" tabindex="-1" style="width:38px; position:absolute; top:20px; left:0"> 
    <div id="mCSB1" class="mCustomScrollBox mCSB_vertical mCSB_5" tabindex="0" style="max-height:130px;"> 
    <div id="mCSB1_container" class="mCSB_container" style="position:relative; top:0px; left:0px; overflow:auto;"> 
    </div> 
    <li class="active-result">1</li> 
    <li class="active-result">2</li> 
    <li class="active-result">3</li> 
    <li class="active-result">4</li> 
    <li class="active-result">5</li> 
    <li class="active-result">6</li> 
    <li class="active-result">7</li> 
    <li class="active-result">8</li> 

    </div> 

    <div id="mCSN1_scrollbar_vertical" class="mCSB1_scrollTools mCSB1_scrollbar mCSB1_scrollTools_vertical" style="display:block;"> 
    <div class="mCSB_draggerContainer"> 
    <div id="mCSB1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height:30px; top:0px; display:block; height:31px; max-height:120px;" oncontextmenu="return false;"> 
    <div class="mCSB_dragger_bar" style="line-height:30px"> 
    </div> 

    <div class="mCSB_draggerRail"></div> 

    </div> 
    </div> 
    </div> 

    </ul> 
</div> 
</div> 

JavaScript:

$(".row-span").click(function(){ 
//$("#expandDropDown").toggle('drop'); 
$("#quantitySelectDrop").toggle(); 
$('.drop-row').toggle(); 
$(".mCSB_container").mCustomerScrollbar(); 

$(".active-result").hover(function(){ 
$(this).toggleClass('highlighted').siblings().removeClass('highlighted'); 
}) 
}) 

CSS:

#quantitySelectDrop.active{ 
left:0px; 
} 

#quantitySelectDrop{ 
position:relative; display:none 
} 

.active-result.highlighted{ 
    background-color:red; 
} 

.drop-search{height:200px; display:block; width:500px}