I customize select . I do this through a drop-down list, in general. When you click on an element with the choose class, the active class is added to it and when pressed again, it is deleted. But this procedure works once, and with further clicks the class is added and removed again, as it should, but the callback does not work, i.e. the list does not fall out again.
$('.choose').on('click', function() { $('.list').show(); if (!$(this).hasClass('active')) { $(this).addClass('active'); $('.active').on('click', function() { $('.list').hide(); }); } else { $(this).removeClass('active'); } }); * { margin: 0; padding: 0; } body { background-color: #ccc; } .white-triangle-down { position: absolute; top: 5px; right: 10px; cursor: pointer; border: 6px solid transparent; border-top: 10px solid #fff; } .select { position: relative; width: 170px; border: 1px solid #000; } .select p { cursor: pointer; font-size: 18px; } ul.list { display: none; border-top: 1px solid #000; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="select"> <p class="choose">Выберете статус</p> <div class="white-triangle-down"></div> <ul class="list"> <li> <p>Пункт1</p> </li> <li> <p>Пункт2</p> </li> <li> <p>Пункт3</p> </li> </ul> </div> 
