Помогите решить проблему, как можно прикрепить dropdown polylang к кастомизированому dropdown так, чтобы плагин корректно работал и переводил все страницы, может есть какой-то другой вариант решения данной проблемы, пишите, буду очень благодарен за помощь
Вот весь исходный код:
<div class="row justify-content-between">
<div class=" col-md-4">
<div class="lang">
<?php pll_the_languages(array('dropdown'=>1)); ?>
</div>
</div>
.select-hidden {
display: none;
visibility: hidden; }
.select {
cursor: pointer;
display: inline-block;
position: relative;
font-size: 16px;
color: #fff;
width: 120px;
height: 40px;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; }
.select-styled {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #060635;
padding: 0 15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
.select-styled:after {
content: "";
width: 0;
height: 0;
border: 7px solid transparent;
border-color: #fff transparent transparent transparent;
position: absolute;
top: 12px;
right: 10px;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
.select-styled:hover {
background-color: #181847; }
.select-styled:active, .select-styled.active {
background-color: #181847; }
.select-styled:active:after, .select-styled.active:after {
top: 6px;
border-color: #fff transparent transparent transparent;
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
.select-options {
display: none;
position: absolute;
bottom: 100%;
right: 0;
left: 0;
z-index: 999;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
background-color: white }
.select-options li {
margin: 0;
padding: 12px 0;
color: black;
text-indent: 15px;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out; }
.select-options li:hover {
color: white;
background: black; }
.select-options li[rel="hide"] {
display: none; }
$('.lang select').each(function(){
var $this = $(this), numberOfOptions = $(this).children('option').length;
$this.addClass('select-hidden');
$this.wrap('<div class="select"></div>');
$this.after('<div class="select-styled"></div>');
var $styledSelect = $this.next('div.select-styled');
$styledSelect.text($this.children('option').eq(0).text());
var $list = $('<ul />', {
'class': 'select-options'
}).insertAfter($styledSelect);
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
var $listItems = $list.children('li');
$styledSelect.click(function(e) {
e.stopPropagation();
$('div.select-styled.active').not(this).each(function(){
$(this).removeClass('active').next('ul.select-options').hide();
});
$(this).toggleClass('active').next('ul.select-options').fadeToggle(300);
});
$listItems.click(function(e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
$list.fadeOut(300);
//console.log($this.val());
});
$(document).click(function() {
$styledSelect.removeClass('active');
$list.fadeOut(300);
});
});