Benutzerdefiniertes Dropdown funktioniert nicht wie erwartet

Question

Ich habe ein benutzerdefiniertes Dropdown für ein Telefon-Lücken-Projekt geschrieben. Es hat 3 Einträge: Enterprices Routing & Switches, Junos Security und Service Provider Routing and Switching. Wenn ich einen von 3 Einträgen auswähle, wird er erfolgreich ausgewählt. Er zeigt den ausgewählten Eintrag zweimal an. Ich möchte, dass der ausgewählte Eintrag nur einmal angezeigt wird. Mein JavaScript-Code ist:

$(".current_track").click(function() { 
    if ($('.track').is(':visible')) { 
    $(".track").hide(); 
    $(".trackIcon").removeClass("trackOpenIcon").addClass("trackCloseIcon"); 
    if ($('.trackName').text() != "Select Track") { 
     $(".category").show(); 
     $('.lock_hide').show(); 
     $('#TrackBuy').show(); 
    } 
    } else { 
    $(".category").hide(); 
    $('.lock_hide').show(); 
    $('#TrackBuy').hide(); 
    $(".track").show(); 
    $('.lock_hide').show(); 
    $(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon"); 
    } 
}); 
$('.trackDiv').on("click", ".track", function() { 
    $('.trackName').text($(this).text()); 
    $('.trackName').attr("id", $(this).attr("id")); 
    $(".track").hide(); 
    $(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon"); 
    $('.lock_hide').show(); 
    // saving user selected/clicked trackid and track name to local stroage 
    localStorage.setItem("mainTrackid", $(this).attr("id")); 
    localStorage.setItem("mainTrackname", $(this).text()); 
    localStorage.setItem("selectedTrackPayStatus", $(this).attr("payStatus")); 
    localStorage.removeItem("selectedTrackPrice"); 
    // check first paper exist or not if exist means load exams list 

    checkTrackpapersExist(); 

}); 

Entire code example.

Answer 1

Updated fiddle.

Sie könnten eine zusätzliche Klasse selected verwenden, um den Trick zu tun.

entfernen selected Klasse von allen track ‚s und fügen Sie es dem angeklickt ein:

$('.trackDiv').on("click", ".track", function() { 
    $('.track').removeClass('selected'); 
    $(this).addClass('selected'); 

    $('.trackName').html($(this).html()); //Use '.html()' to show the icon 
    .... 
}); 

die ausgewählte track aus der Dropdown ausblenden:

$(".current_track").click(function() { 
    ..... 

    $('.track.selected').hide(); 
}); 

Hoffnung, das hilft.

$(".current_track").click(function() { 
 

 
    if ($('.track').is(':visible')) { 
 
    $(".track").hide(); 
 
    $(".trackIcon").removeClass("trackOpenIcon").addClass("trackCloseIcon"); 
 
    if ($('.trackName').text() != "Select Track") { 
 
     $(".category").show(); 
 
     $('.lock_hide').show(); 
 
     $('#TrackBuy').show(); 
 
    } 
 
    } else { 
 
    $(".category").hide(); 
 
    $('.lock_hide').show(); 
 
    $('#TrackBuy').hide(); 
 
    $(".track").show(); 
 
    $('.lock_hide').show(); 
 
    $(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon"); 
 
    } 
 

 
    $('.track.selected').hide(); 
 
}); 
 
$('.trackDiv').on("click", ".track", function() { 
 
    $('.track').removeClass('selected'); 
 
    $(this).addClass('selected'); 
 

 
    $('.trackName').html($(this).html()); 
 
    $('.trackName').attr("id", $(this).attr("id")); 
 
    $(".track").hide(); 
 
    $(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon"); 
 
    $('.lock_hide').show(); 
 
});

.trackDiv > .track > .fa-lock { 
 
    margin-top: 3px; 
 
} 
 

 
.fa-lock { 
 
    color: #fff; 
 
    font-size: 23px; 
 
} 
 

 
.lock_category { 
 
    padding-right: 0px; 
 
    padding-top: 3px; 
 
} 
 

 
.lock_hide { 
 
    display: none; 
 
} 
 

 
.fa-unlock { 
 
    color: #fff; 
 
    font-size: 17px; 
 
} 
 

 
.trackDiv { 
 
    background-color: #374550; 
 
    border-radius: 4px; 
 
    height: 40%; 
 
    margin: 2% 0 0; 
 
    padding: 3% 2.7% 2.9%; 
 
    width: 100%; 
 
} 
 

 
.trackName { 
 
    color: #fff; 
 
    font-family: "robotRegular"; 
 
    font-size: 16px; 
 
    font-weight: 500; 
 
} 
 

 
.trackOpenIcon { 
 
    background-image: url("../JunosImages/mob/down-arrow_normal1.png"); 
 
    background-image: url("../JunosImages/mob/front-arrow_normal_tab.png"); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    display: block; 
 
    height: 11px; 
 
    margin-top: 1.5%; 
 
    width: 19px; 
 
} 
 

 
.trackCloseIcon { 
 
    background-image: url("../JunosImages/mob/front-arrow_normal_tab.png"); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    display: block; 
 
    height: 18px; 
 
    margin-top: 0.7%; 
 
    width: 12px; 
 
} 
 

 
.track { 
 
    color: #fff; 
 
    display: block; 
 
    font-family: "robotRegular"; 
 
    font-size: 16px; 
 
    font-weight: 500; 
 
    padding: 5% 0 0; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div id="categorylist"> 
 
    <div class="trackDiv"> 
 
    <div class="current_track"> 
 
     <span class="trackName">Select Track</span> 
 
     <span class="trackIcon trackOpenIcon pull-right"></span> 
 
     <div><span class="label label-primary Buy" id="TrackBuy" style="display:none">Buy $24</span></div> 
 
    </div> 
 
    <span id="t1" class="track">Enterprices Routing & Switches <span class="fa fa-lock pull-left"></span></span> 
 
    <span id="t2" class="track">Junos Security</span> 
 
    <!-- <span id="t3" class="track">Data Center Design</span> --> 
 
    <span id="t4" class="track"> Service Provider Routing and Switching</span> 
 
    </div> 
 
    <div class="category"> 
 
    <span class="ctgryName">JNCIs - SEC</span> 
 
    <span class="ctgryIcon pull-right"></span> 
 
    </div> 
 
    <div class="category"> 
 
    <span class="ctgryName">JNCIS - ENT</span> 
 
    <span class="ctgryIcon pull-right"></span> 
 
    </div> 
 
    <div class="category"> 
 
    <span class="ctgryName">JNCIS - ENT</span> 
 
    <span class="ctgryIcon pull-right"></span> 
 
    </div> 
 
    <div class="category"> 
 
    <span class="ctgryName" id="ctgryName">JNCIA - Junos</span> 
 
    <span class="ctgryIcon pull-right"></span> 
 
    </div> 
 
</div>