PHP Yii2 TabsX::widget превратить в select / или из ul li сделать select на css

155

01 августа 2019, 21:50

Есть кусок кода на PHP Yii2. Я делаю адаптив под мобильную версию. Как вариант ->"Возможно кто-то знает как ul li можно превратить в подобие select чистым css и не заморачиваться с кодом ниже".

<? 
$items = [ 
     
    [ 
        'label'=>'<i class="fas fa-home fas-hidden"></i>'.Yii::t('app', 'Resident of Ireland'), 
        'content'=>$html, 
        'active'=>true, 
        'linkOptions'=>['data-url'=>Url::to(['/package/tabs?tab=1'])] 
    ], 
    [ 
        'label'=>'<i class="fas fa-user fas-hidden"></i>'.Yii::t('app', 'Resident of European countries'), 
        'content'=>$html, 
        'linkOptions'=>['data-url'=>Url::to(['/package/tabs?tab=2'])] 
    ], 
    [ 
        'label'=>'<i class="fas fa-user fas-hidden"></i>'.Yii::t('app', 'Resident of non-European countries'), 
        'content'=>$html, 
        'linkOptions'=>['data-url'=>Url::to(['/package/tabs?tab=3'])] 
    ], 
];  
 
?> 
 
<?=  
  TabsX::widget([ 
      'items'=>$items, 
      'position'=>TabsX::POS_ABOVE, 
      'encodeLabels'=>false 
  ]); 
?>

выводит его так

<ul id="w0" class="nav nav-tabs hidden-print" data-krajee-tabsx="tabsX_00000000" role="tablist"> 
  <li class="active"><a href="#w0-tab0" data-url="/ru-ru/package/tabs?tab=1" data-toggle="tab" role="tab" aria-selected="false" aria-controls="w0-tab0"><i class="fas fa-home fas-hidden"></i>Resident of Ireland</a></li> 
  <li><a href="#w0-tab1" data-url="/ru-ru/package/tabs?tab=2" data-toggle="tab" role="tab" aria-selected="false" aria-controls="w0-tab1"><i class="fas fa-user fas-hidden"></i>Resident of European countries</a></li> 
  <li><a href="#w0-tab2" data-url="/ru-ru/package/tabs?tab=3" data-toggle="tab" role="tab" aria-selected="false" aria-controls="w0-tab2"><i class="fas fa-user fas-hidden"></i>Resident of non-European countries</a></li> 
</ul>

Плюс таблица в самом widget.

На десктопе все хорошо, но в мобильной версии так не подходит, мне нужно превратить ul > li примерно в такое

function openCity(evt, cityName) { 
  // Declare all variables 
  var i, tabcontent, tablinks; 
 
  // Get all elements with class="tabcontent" and hide them 
  tabcontent = document.getElementsByClassName("tabcontent"); 
  for (i = 0; i < tabcontent.length; i++) { 
    tabcontent[i].style.display = "none"; 
  } 
 
  // Get all elements with class="tablinks" and remove the class "active" 
  tablinks = document.getElementsByClassName("tablinks"); 
  for (i = 0; i < tablinks.length; i++) { 
    tablinks[i].className = tablinks[i].className.replace(" active", ""); 
  } 
 
  // Show the current tab, and add an "active" class to the button that opened the tab 
  document.getElementById(cityName).style.display = "block"; 
  evt.currentTarget.className += " active"; 
}

<select name="" id="tab" onChange="CityChange()"> 
  <option value="tab_1">Choose</option> 
  <option value="tab_1">Resident of Ireland</option> 
  <option value="tab_2">Resident of European countries</option> 
  <option value="tab_3">Resident of non-European countries</option> 
</select> 
 
<div id="tab_1" style="display: none">Resident of Ireland</div> 
<div id="tab_2" style="display: none">Resident of European countrie</div> 
<div id="tab_3" style="display: none">Resident of non-European countries</div> 
<div id="adress"></div>

Я не могу понять как привязать

'linkOptions' => ['data-url' => Url::to(['/package/tabs?tab=1'])] 
'linkOptions' => ['data-url' => Url::to(['/package/tabs?tab=2'])] 
'linkOptions' => ['data-url' => Url::to(['/package/tabs?tab=3'])]

к select

<div id="tab_1" style="display: none">Resident of Ireland</div> 
<div id="tab_2" style="display: none">Resident of European countrie</div> 
<div id="tab_3" style="display: none">Resident of non-European countries</div>

Может кто-то сталкивался с таким?

Answer 1

Решил вопрос выпадающим списком!

var text = document.getElementById("ul"), 
  firstParagraph = text.firstElementChild; 
var p = document.createElement("li"); 
p.innerHTML = "Choose region"; 
text.insertBefore(p, firstParagraph); 
 
$('ul li:first').addClass('init'); 
 
$("ul").on("click", ".init", function() { 
  $(this).closest("ul").children('li:not(.init)').toggle(); 
}); 
 
var allOptions = $("ul").children('li:not(.init)'); 
$("ul").on("click", "li:not(.init)", function() { 
  allOptions.removeClass('selected'); 
  $(this).addClass('selected'); 
  $("ul").children('.init').html($(this).html()); 
  allOptions.toggle(); 
});

ul { 
  height: auto; 
  width: 100%; 
} 
 
ul li { 
  z-index: 2; 
} 
 
ul li:not(.init) { 
  float: left; 
  width: 100%; 
  display: none; 
} 
 
ul li:not(.init):hover, 
ul li .selected:not(.init) { 
  background: #09f; 
} 
 
ul li .init { 
  cursor: pointer; 
} 
 
a#submit { 
  z-index: 1; 
} 
 
li a { 
  justify-content: flex-start; 
  font-family: "Montserrat", sans-serif; 
} 
 
.init { 
  text-align: left; 
  color: #bb9d54; 
  display: flex; 
  justify-content: flex-start; 
}