Блог

Главная - Вопросы по программированию - Автоматическое скрытие списка при загрузке с помощью jQuery

Автоматическое скрытие списка при загрузке с помощью jQuery

#html #jquery

#HTML #jquery

Вопрос:

Как я могу автоматически отображать этот свернутый список без изменения структуры HTML? Это означает, что я хочу свернуть все папки дерева.

И изначально, вместо того, чтобы показывать это:

введите описание изображения здесь

Я хочу, чтобы это:

введите описание изображения здесь

Это моя попытка, но безуспешно:

 $('#master-ul').hide()

$('#master-ul').on('click', 'li', function() {
  $(this).find('ul').slideToggle();
  return false
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<ul id="master-ul">
  <li class="folder">
    <i class="fa fa-folder"></i> first_folder
    <ul>
      <li class="file"><i class="fa fa-file"></i> jose.dat</li>
      <li class="folder">
        <i class="fa fa-folder"></i> second_folder
        <ul>
          <li class="file"><i class="fa fa-file"></i> as.dat</li>
        </ul>
      </li>
      <li class="folder">
        <i class="fa fa-folder"></i> third_folder
        <ul>
          <li class="file "><i class="fa fa-file "></i> a.dat</li>
          <li class="file "><i class="fa fa-file "></i> b.dat</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

PS: может быть более одной корневой папки. Это означает, что first_folder в примере их несколько.

Ответ №1:

Почему бы не использовать css, а затем использовать jq для изменения этого?

 $('#master-ul').on('click', 'li', function() {
  $('#secondlvl').slideToggle();
  return false
});
$('.folder').on('click', 'li', function() {
  $(this).find('ul').slideToggle();
  return false
});  
 #master-ul li ul {
  display: none;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />


<ul id="master-ul">
  <li class="folder">
    <i class="fa fa-folder"></i> first_folder
    <ul id='secondlvl'>
      <li class="file"><i class="fa fa-file"></i> jose.dat</li>
      <li class="folder">
        <i class="fa fa-folder"></i> second_folder
        <ul>
          <li class="file"><i class="fa fa-file"></i> as.dat</li>
        </ul>
      </li>
      <li class="folder">
        <i class="fa fa-folder"></i> third_folder
            <ul id="thirdlvl">
               <li class="file "><i class="fa fa-file "></i> a.dat</li>
               <li class="file "><i class="fa fa-file "></i> b.dat</li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

Редактировать:
Добавьте #secondlvl для управления первый slideToggle()
Дополнительно:
Если вам не нужен secondlvl идентификатор, который вы можете использовать $('#master-ul > li > ul').slideToggle(); вместо $('#secondlvl').slideToggle(); для первого слайда ul .

 $('#master-ul').on('click', 'li', function() {
  $('#master-ul > li > ul').slideToggle();
  return false
});
$('.folder').on('click', 'li', function() {
  $(this).find('ul').slideToggle();
  return false
});  
 #master-ul li ul {
  display: none;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />


<ul id="master-ul">
  <li class="folder">
    <i class="fa fa-folder"></i> first_folder
    <ul>
      <li class="file"><i class="fa fa-file"></i> jose.dat</li>
      <li class="folder">
        <i class="fa fa-folder"></i> second_folder
        <ul>
          <li class="file"><i class="fa fa-file"></i> as.dat</li>
        </ul>
      </li>
      <li class="folder">
        <i class="fa fa-folder"></i> third_folder
            <ul id="thirdlvl">
               <li class="file "><i class="fa fa-file "></i> a.dat</li>
               <li class="file "><i class="fa fa-file "></i> b.dat</li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

Комментарии:

1. Я добавил недостающий JS 😊

2. О, я пропустил сообщение о том, что мне также нужно сопоставить все внутренние <li> элементы

3. Спасибо, Алессио, я не добавил его, потому что я не знаю, есть ли у avion уже свой собственный код

4. Вы изменили HTML, добавив id тег. Как указано в сообщении, я не могу этого сделать, поскольку это динамически сгенерированный HTML-контент из входного массива с использованием Javascript: (

5. Нет! Я несколько дней выхожу из офиса. Я дам вам знать, когда протестирую его!