La liste déroulante personnalisée ne fonctionne pas

J'essaie de créer une liste déroulante personnalisée. Je veux avoir deux options dans ma liste déroulante, prédéfinie et personnalisée. Lorsque je sélectionne la coutume dans la liste, elle n'est pas sélectionnée. J'ai ce code jusqu'ici qui ne fonctionne pas.La liste déroulante personnalisée ne fonctionne pas

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
function DropDown(el) { 
    this.dd = el; 
    this.initEvents(); 
} 
DropDown.prototype = { 
    initEvents : function() { 
     var obj = this; 

     obj.dd.on('click', function(event){ 
      $(this).toggleClass('active'); 
      event.stopPropagation(); 
     }); 
    } 
} 
$(function() { 

       var dd = new DropDown($('#dd')); 

       $(document).click(function() { 
        // all dropdowns 
        $('.wrapper-dropdown-5').removeClass('active'); 
       }); 

      }); 

</script> 
<style> 
.wrapper-dropdown-5 { 
    /* Size & position */ 
    position: relative; 
    width: 144px; 
    margin: 0 auto; 
    padding: 12px 15px; 

    /* Styles */ 
    background: #fff; 
    cursor: pointer; 
    outline: none; 
    transition: all 0.3s ease-out; 
} 
.wrapper-dropdown-5:after { /* Little arrow */ 
    content: ""; 
    width: 0; 
    height: 0; 
    position: absolute; 
    top: 50%; 
    left: 165px; 
    margin-top: -3px; 
    border-width: 6px 6px 0 6px; 
    border-style: solid; 
    border-color: #067ab4 transparent; 
} 
.wrapper-dropdown-5 .dropdown { 
    /* Size & position */ 
    position: absolute; 
    top: 30%; 
    left: -40; 
    right: 0; 

    /* Styles */ 

    list-style: none; 
    transition: all 0.3s ease-out; 

    /* Hiding */ 
    max-height: 0; 
    overflow: hidden; 
} 
.wrapper-dropdown-5 .dropdown li { 
    padding: 0 10px ; 
} 
.wrapper-dropdown-5 .dropdown li a { 
    display: block; 
    text-decoration: none; 
    color: #067ab4; 
    transition: all 0.3s ease-out; 

} 
.wrapper-dropdown-5 .dropdown li:last-of-type a { 
    border: none; 
} 
.wrapper-dropdown-5 .dropdown li i { 
    margin-right: 5px; 
    color: inherit; 
    vertical-align: middle; 
} 
/* Hover state */ 
.wrapper-dropdown-5 .dropdown li:hover a { 
    color: #57a9d9; 
} 
/* Active state */ 
.wrapper-dropdown-5.active { 
    border-radius: 5px 5px 0 0; 
    box-shadow: none; 
    border-bottom: none; 
    color: white; 
} 
.wrapper-dropdown-5.active:after { 
    border-color: #067ab4 transparent; 
} 
.wrapper-dropdown-5.active .dropdown { 
    border-bottom: 0px solid rgba(0,0,0,0.2); 
    max-height: 400px; 
} 
div#dd 
{ 
color: #067ab4; 
font: 30px tahoma; 
display: inline-block; 
} 
div#textA 
{ 
display: inline-block; 
font: 30px tahoma; 
padding-left: 20px; 
} 
div#textB 
{ 
display: inline-block; 
font: 30px tahoma; 
padding-left: 6px; 
} 
</style> 
</head> 
<body> <div id="textA">I want to select a</div> 
     <div id="dd" class="wrapper-dropdown-5" tabindex="1">Predefined 
    <ul class="dropdown"> 
     <li><a href="#"><i class="icon-user"></i>Custom</a></li> 
    </ul> 
</div> 
<div id="textB">profile</div> 
    </body> 
    <html>

Source

2014-07-16 user3842029

Pourquoi ça marche ... il n'y a pas événement attaché à cliquer sur mesure - ou quoi que ce soit dans un menu déroulant? – tymeJV

Je suis nouveau sur javascript/jquery. Pouvez-vous s'il vous plaît corriger mon code pour que cela fonctionne. – user3842029

Est-ce que vous allez pour? J'ai juste utilisé jquery pour échanger le texte sur un événement de clic, a besoin de quelques ajustements je pense à votre css si pour le faire revenir en arrière.

est ici le violon: http://jsfiddle.net/R5aHa/

$('#dd2').click(function(){ 
var selected = $('#dd2').text(); 

if($('#dd2').text(selected)){ 
    $('#dd2').html("Predefined"); 
    $('#dd').html("Custom"); 
} else { 
    $('#dd').html("Predefined"); 
    $('#dd2').html("Custom"); 
} 
});

Source

2014-07-16 22:02:25 ShemSeger

Merci ShemSeger – user3842029

Vous devez joindre un écouteur d'événement à l'élément de navigation pour que cela fonctionne, sinon vous avez tout ce javascript écrit et rien d'appeler à travailler.

Event Listeners

Source

2014-07-16 21:35:23 Sabolis

+1, mais au débordement de la pile, nous encourageons les utilisateurs à inclure un résumé du contenu lié dans les réponses. De cette façon, si le lien devient invalide, la réponse est toujours valide. –

La liste déroulante personnalisée ne fonctionne pas

Répondre

Questions connexes