Стилизировать ul под выпадающий список?

Question

[WebforSelf]

<ul class="dropdown-lang" >	
<li class="lang-item lang-item-54 lang-item-ru lang-item-first"><a lang="ru-RU" hreflang="ru-RU" href="/">
<img src="" title="RU" alt="RU" width="16" height="11" style="width: 16px; height: 11px;">
<span style="margin-left:0.3em;">RU</span></a></li>

<li class="lang-item lang-item-57 lang-item-en current-lang"><a lang="en-US" hreflang="en-US" href="/en/main/">
<img src="" title="ENG" alt="ENG" width="16" height="11" style="width: 16px; height: 11px;">
<span style="margin-left:0.3em;">ENG</span></a></li>
</ul>

Есть вывод языков на водпрессе, выводится в формате ul li , нужен выпдающий список аналогично select

Как можно задать стили , чтоб был такой формат.


Выбранный язык подсвечивался и возможность выбрать второй.
current-lang - класс выбранного языка

С помощью css можно решить? или нужен jquery?

Comments

[xdevelx]

На codepen смотрели?
https://codepen.io/search/pens?q=language+switcher

Answer 1

[Danny Arty]

Comments

[art_y10]

А если без init-значения? Чтобы текущий язык показывался. У li с текущим языком есть класс active. Решаю похожую задачу как топикстартер, вот нашел ваш ответ.

[Danny Arty]

art_y10, просто можете добавить к языку по умолчанию, например RU class="selected" и в init вместо выберите язык напишите RU

[art_y10]

Danny Arty, спасибо. Но текст языка не меняется при выборе в init.

[Danny Arty]

art_y10, все нормально меняется

[art_y10]

Danny Arty, спасибо. У меня там внутри li=шек еще ссылки (теги a). В результате при выборе страница перезагружается и текст в li-шке с init показывает такой как после загрузки страницы...Поэтому чуть модифицировал скрипт - вначале (после загрузки) проверяю, какой язык выбран и подставляю в li с init, а дальше идет обработка клика. Также использую у себя класс active вместо selected. Получилось то, что мне нужно.

var initText = $("ul.lng-menu li.active").text().substring(2);
            $("ul.lng-menu li.init").text(initText);

            $("ul.lng-menu").on("click", ".init", function() {
                $(this).closest("ul.lng-menu").children('li:not(.init)').toggle();
            });
            
            var allOptions = $("ul.lng-menu").children('li:not(.init)');
            $("ul.lng-menu").on("click", "li:not(.init)", function() {
                allOptions.removeClass('active');
                $(this).addClass('active');
                $("ul.lng-menu").children('.init').html($(this).html());
                allOptions.toggle();
            });

[Danny Arty]

art_y10, ааа, ну дык это просто стилизация, рабочий вариант конечно надо модифицировать)