如何为展开/收起的列表添加加减图标及左内边距？

Hey there! I'll help you implement the plus/minus icons and indentation for your nested lists. Let's break this down into CSS and JavaScript adjustments since we don't need to mess with your existing HTML structure too much.

Step 1: Add CSS for Icons & Indentation #

We'll use CSS pseudo-elements (::before) to create the plus/minus icons, and add a class to handle the expanded state for both the icon and indentation.

/* Base styles for all list items */
.headcat li, .subcat li {
  position: relative;
  padding-left: 20px; /* Reserve space for the icon */
  cursor: pointer; /* Show pointer to indicate clickable items */
}

/* Plus icon for closed state (default) */
.headcat li::before, .subcat li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
}

/* Minus icon for expanded state */
.headcat li.expanded::before, .subcat li.expanded::before {
  content: "-";
}

/* Add left padding to submenus when expanded */
.headcat li.expanded > ul.subcat, .subcat li.expanded > ul.subcat {
  padding-left: 15px; /* Adjust this value for your desired indentation */
}

/* Hide all subcategories by default */
ul.subcat {
  display: none;
}

Step 2: Update JavaScript to Toggle the Expanded Class #

We'll tweak your existing jQuery code to add/remove an expanded class whenever a list item is clicked. This class will trigger our CSS styles for icons and indentation.

$(document).ready(function() {
  // Hide all subcategories on page load
  $('ul.subcat').hide();

  // Handle click events on list items
  $('li').click(function(event) {
    event.stopPropagation();
    const $submenu = $(this).children('ul.subcat');
    
    // Toggle visibility of the submenu
    $submenu.toggle();
    
    // Toggle the 'expanded' class to switch icons and apply indentation
    $(this).toggleClass('expanded');
  });
});

Step 3: Your Existing HTML (No Changes Required!) #

Your original HTML works perfectly with the above CSS and JavaScript—no edits needed here:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="headcat">
  <li>item
    <ul class="subcat">
      <li>subitem 1
        <ul class="subcat">
          <li>subsubitem 1
            <ul class="subcat">
              <li>
                <p>text</p>
              </li>
            </ul>
          </li>
          <li>subsubitem 2
            <ul class="subcat">
              <li>
                <p>text</p>
              </li>
              <li>subsubsubitem 1
                <ul class="subcat">
                  <li>
                    <p>text</p>
                  </li>
                </ul>
              </li>
              <li>subsubsubitem 2</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>item 2</li>
    </ul>
  </li>
</ul>

Quick Explanation: #

• Icons: The ::before pseudo-element adds a "+" to every list item by default. When we add the expanded class, it switches to a "-".
• Indentation: When an item is expanded, its direct submenu gets left padding to create that nested indent effect.
• No Submenus: Even items without subcategories will show the "+" icon (since we apply the pseudo-element to all lis). If you want to hide the icon for items without submenus, just let me know—I can adjust the CSS to target only lis with a ul.subcat child.

内容的提问来源于stack exchange，提问作者Acikaaca