Please help me. Confused and I don’t know how to implement such a task: when you click a list, when you click on another list, you need to open the list and open the one that was clicked.
Example:
jsfiddle-36sjz5g7
$(document).ready(function(){ var i = 0; $(".select_side").each(function(){ i++; $(this).attr("data-name", "select"+i); }); $("[data-name=" +i+"]").ready(function(){ var thisAttr = $(this).find(".select").parent(); $(this).find(".select").click(function(event){ $(this).parent().toggleClass("opened"); }); $(document).on('click touchstart', function(e){ if(!$(e.target).closest(thisAttr).length) { thisAttr.removeClass("opened"); } }); }); }); * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin: 0; padding: 0; } body { padding: 40px; } .select_side { display: inline-block; min-width: 196px; position: relative; } .select_side .select { border: 1px solid #000; position: relative; height: 39px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; cursor: pointer; padding: 0 47px 0 20px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .select_side .select span { font-size: 14px; color: #2F2F2F; line-height: 37px; } .select_side .drop { position: absolute; width: 100%; top: 49px; right: 0; background: #FFF; padding: 10px; box-shadow: 0 8px 25px 0 rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06); -webkit-box-shadow: 0 8px 25px 0 rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06); -moz-box-shadow: 0 8px 25px 0 rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.06); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; z-index: 200; transform: scale(0) translate3d(0,-40px,0); -webkit-transform: scale(0) translate3d(0,-40px,0); -moz-transform: scale(0) translate3d(0,-40px,0); -o-transform: scale(0) translate3d(0,-40px,0); -ms-transform: scale(0) translate3d(0,-40px,0); transform-origin: 50% 0; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; opacity: 0; visibility: hidden; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .select_side.opened .drop { transform: scale(1) translate3d(0,0,0); -webkit-transform: scale(1) translate3d(0,0,0); -moz-transform: scale(1) translate3d(0,0,0); -o-transform: scale(1) translate3d(0,0,0); -ms-transform: scale(1) translate3d(0,0,0); opacity: 1; visibility: visible; } .select_side .drop:after, .select_side .drop:before { bottom: 100%; right: 13px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .select_side .drop:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 7px; } .select_side .drop:before { border-color: rgba(228, 228, 228, 0); border-bottom-color: #e4e4e4; border-width: 8px; margin-right: -1px; } .select_side .drop ul { display: block; max-height: 240px; overflow-x: hidden; border-top: 1px solid #F2F2F2; overflow-y: auto; -webkit-overflow-scrolling: touch; } .select_side .drop ul li { display: block; font-size: 14px; cursor: pointer; border-bottom: 1px solid #F2F2F2; padding: 9px 10px 10px 10px; } .select_side .drop ul li:hover, .select_side .drop ul li.active { background: #F6F6F6; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="select_side"> <div class="select"><span>Выберите</span></div> <div class="drop"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </div> <div class="select_side"> <div class="select"><span>Выберите 2</span></div> <div class="drop"> <ul> <li>44</li> <li>55</li> <li>45</li> </ul> </div> </div> 
