Dropdown на ul li для языкового меню

185

24 апреля 2021, 09:30

Всем привет! Огромная проблема, не получается сделать дропдаун меню для языкового плагина Polyglot WordPress. Вызывается список в коде вот так: <ul><?php pll_the_languages(array('show_flags'=>1,'show_names'=>1));?></ul> Выводит он вот список, где у текущего языка есть класс .current-lang

Как сделать дропдаун (мб на jquery?), где при выборе будет срабатывать ссылка, плюс класс .current-lang будет всегда отображаться вверху списка? Ничего подобного найти не могу.

            <ul>   
              <li class="lang-item lang-item-3 lang-item-ru lang-item-first no-translation"> 
                <a lang="ru-RU" hreflang="ru-RU" href="#"> 
                  <img src="#ссылка_на_изображение" title="Русский" alt="Русский" width="16" height="11"> 
                  <span style="margin-left:0.3em;">Русский</span> 
                </a> 
              </li> 
              <li class="lang-item lang-item-10 lang-item-kk current-lang"> 
                <a lang="kk" hreflang="kk" href="#"><img src="#ссылка_на_изображение" title="Қазақ тілі" alt="Қазақ тілі" width="16" height="11"><span style="margin-left:0.3em;">Қазақ тілі</span></a></li> 
            </ul>

Answer 1

var selected = $('.drop-dl .current-lang img').attr('src'); 
$('.lang-chose img').attr('src', selected); 
 
$('.lang-chose').click(function(event) { 
    $('.drop-dl ul').slideToggle(500); 
    event.preventDefault(); 
    return false; 
}); 
 
$(document).bind('click', function(e) { 
  var $clicked = $(e.target); 
  if (! $clicked.parents().hasClass("drop-dl")) 
  $(".drop-dl ul").hide(); 
});

.drop-dl ul { 
  display: none; 
} 
.drop-dl ul li { 
  list-style-type: none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="drop-dl"> 
   
  <!-- action link to open drop down and show current lang flag --> 
  <a class="lang-chose" href="#"><img src=""> Chose language</a> 
   
  <!-- Unsorted Lists from widget language switcher --> 
  <ul> 
    	<li class="lang-item-en current-lang"><a href="#" hreflang="en-US"><img alt="English" title="English" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHzSURBVHjaYkxOP8IAB//+Mfz7w8Dwi4HhP5CcJb/n/7evb16/APL/gRFQDiAAw3JuAgAIBEDQ/iswEERjGzBQLEru97ll0g0+3HvqMn1SpqlqGsZMsZsIe0SICA5gt5a/AGIEarCPtFh+6N/ffwxA9OvP/7//QYwff/6fZahmePeB4dNHhi+fGb59Y4zyvHHmCEAAAW3YDzQYaJJ93a+vX79aVf58//69fvEPlpIfnz59+vDhw7t37968efP3b/SXL59OnjwIEEAsDP+YgY53b2b89++/awvLn98MDi2cVxl+/vl6mituCtBghi9f/v/48e/XL86krj9XzwEEEENy8g6gu22rfn78+NGs5Ofr16+ZC58+fvyYwX8rxOxXr169fPny+fPn1//93bJlBUAAsQADZMEBxj9/GBxb2P/9+S/R8u3vzxuyaX8ZHv3j8/YGms3w8ycQARmi2eE37t4ACCDGR4/uSkrKAS35B3TT////wADOgLOBIaXIyjBlwxKAAGKRXjCB0SOEaeu+/y9fMnz4AHQxCP348R/o+l+//sMZQBNLEvif3AcIIMZbty7Ly6t9ZmXl+fXj/38GoHH/UcGfP79//BBiYHjy9+8/oUkNAAHEwt1V/vI/KBY/QSISFqM/GBg+MzB8A6PfYC5EFiDAABqgW776MP0rAAAAAElFTkSuQmCC"></a> 
</li> 
  	  <li class="lang-item lang-item-5 lang-item-ar"><a href="#" hreflang="ar-AE"><img alt="العربية" title="العربية" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAEqSURBVHjaYvzPgAD/GBiYaxkY/oARkPMLzPiFwgAIwKG80wAAwlAADAnq0MNWGTipvfcpheWmmy9GNGUPey/RkskiWwP6mhDy5BVAYA0M//8/ecrw9y8QPfj8++/fv7//A9UBFYHIX39//fr3C8iQ5ZEF2gAQQCxgs/9DVAOVrXRe+R8HYGRkfKj6ECCAWIBOZQSqBjuB4fef/7gByJP//gEEENhJf0BmE9bAyPjnzx+AAAI76S/I+P+/f+HXwAi2BCCAwE4CGv/rF8hVv37hcQ+QBDoJIIBAGphBxv9m+A0KG2tr61+/fv3+/RtKgll//vz+8+eviorKxYsXAQIIpIHp9x8GSUmQnj9/Zf78hgCgcyEkEPyFAaA9AAHE+BUcp3AkzEAAAAQYAHrGaQbZnz4fAAAAAElFTkSuQmCC"></a> 
</li> 
  </ul> 
   
</div>