Как оставить список раскрытым, если в нем отмечен checkbox

104

29 декабря 2020, 11:00

Есть такая разметка:

<ul>
    @foreach($attributes as $attribute)
    <li class="menu-item-has-children"> {{ $attribute->title }}
        <i class="sidebar-menu-arrow fa fa-arrow-down" aria-hidden="true"></i>
        <ul class="sub-menu">
            @foreach($values as $value)
                @if($attribute->id==$value->attribute_id)
                    <li>
                        <input class="checkbox" name="filter[{{$attribute->id}}][{{ $value->id }}]" type="checkbox" value="1"
                                {{empty(request()->filter[$attribute->id][$value->id]) ? '' : 'checked'}} />
                        {{ $value->value }}
                    </li>
                @endif
            @endforeach
        </ul>
    </li>
    @endforeach
</ul>

Состояние checkbox`ов запоминается после обновления страницы, переходов на другие страницы. Есть простой код jquery, который раскрывает/скрывает список

var $sidebarArrow = $('.sidebar-menu-arrow');
$sidebarArrow.click(function() {
    $(this).next().slideToggle(300);
});

Как при загрузке страницы раскрыть все списки, в которых отмечен какой либо checkbox?

Answer 1

Вам нужно отобразить элементы с классом sub-menu, которые имеют вложенные отмеченные чекбоксы

$('.sub-menu:has(:checked)').show();

jQuery(function($) { 
  var $sidebarArrow = $('.sidebar-menu-arrow'); 
 
  $sidebarArrow.click(function() { 
    $(this).next().slideToggle(300); 
  }); 
   
  $('.sub-menu:has(:checked)').show(); 
});

.sub-menu { 
  display: none; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul> 
  <li class="menu-item-has-children"> 
    <i class="sidebar-menu-arrow fa fa-arrow-down" aria-hidden="true">1</i> 
    <ul class="sub-menu"> 
      <li> 
        <input class="checkbox" type="checkbox" value="1" checked="checked" /> 1.1 
        <input class="checkbox" type="checkbox" value="1" checked="checked" /> 1.2 
      </li> 
    </ul> 
  </li> 
  <li class="menu-item-has-children"> 
    <i class="sidebar-menu-arrow fa fa-arrow-down" aria-hidden="true">2</i> 
    <ul class="sub-menu"> 
      <li> 
        <input class="checkbox" type="checkbox" value="1" /> 2.1 
        <input class="checkbox" type="checkbox" value="1" checked="checked" /> 2.2 
      </li> 
    </ul> 
  </li> 
  <li class="menu-item-has-children"> 
    <i class="sidebar-menu-arrow fa fa-arrow-down" aria-hidden="true">3</i> 
    <ul class="sub-menu"> 
      <li> 
        <input class="checkbox" type="checkbox" value="1" /> 3.1 
        <input class="checkbox" type="checkbox" value="1" /> 3.2 
      </li> 
    </ul> 
  </li> 
</ul>