HTML元素点击触发的JS函数查询与侧边栏切换图标修改咨询

Hey there! Let's break down your two questions step by step:

1. 点击HTML元素时会触发哪个JavaScript函数？ #

It depends on how you've bound the event to the element—here are the most common scenarios:

• 内联事件绑定: If you've added an onclick attribute directly to the HTML element (like <button onclick="myClickFunc()">), clicking it will trigger the myClickFunc() function you defined.
• DOM事件监听: If you used addEventListener in your JS code (e.g., document.querySelector('.sidebar-toggler').addEventListener('click', toggleSidebar)), the toggleSidebar function will fire when the element is clicked.
• 事件委托: For dynamically added elements, you might listen to a parent element's click event, then check if the target matches your element. For example:

  document.querySelector('.sidebar-toggler-wrapper').addEventListener('click', function(e) {
    if (e.target.classList.contains('sidebar-toggler')) {
      toggleSidebar(); // This function runs when the toggler is clicked
    }
  });
  

2. 给侧边栏切换按钮添加展开/收起图标 #

Since your .sidebar-toggler div is empty, here are a few straightforward ways to add toggleable icons:

方法1: Pure CSS Icons (No Extra HTML Needed) #

You can draw a hamburger/close icon using CSS pseudo-elements, then toggle a class to switch between states:
First, update your HTML slightly (add a span for the middle line of the hamburger):

<li class="sidebar-toggler-wrapper">
    <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
    <div class="sidebar-toggler">
      <span></span>
    </div>
    <div class="clearfix"> </div>
    <!-- END SIDEBAR TOGGLER BUTTON -->
</li>

Then add this CSS:

.sidebar-toggler {
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hamburger icon styles */
.sidebar-toggler::before,
.sidebar-toggler::after,
.sidebar-toggler span {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #333;
  transition: all 0.3s ease;
}

.sidebar-toggler::before { top: 8px; }
.sidebar-toggler span { 
  top: 50%;
  transform: translateY(-50%);
}
.sidebar-toggler::after { bottom: 8px; }

/* Close icon style (when active class is added) */
.sidebar-toggler.active::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.sidebar-toggler.active span { opacity: 0; }
.sidebar-toggler.active::after {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

Finally, add JS to toggle the active class:

const toggler = document.querySelector('.sidebar-toggler');
toggler.addEventListener('click', function() {
  this.classList.toggle('active');
  // Add your sidebar expand/collapse logic here
});

方法2: SVG Icons #

If you prefer using SVG (no external dependencies), embed both states directly in the HTML and toggle their visibility:

<li class="sidebar-toggler-wrapper">
    <div class="sidebar-toggler">
      <!-- Hamburger SVG -->
      <svg class="toggle-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">
        <line x1="3" y1="12" x2="21" y2="12"></line>
        <line x1="3" y1="6" x2="21" y2="6"></line>
        <line x1="3" y1="18" x2="21" y2="18"></line>
      </svg>
      <!-- Close SVG (hidden by default) -->
      <svg class="toggle-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" style="display: none;">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
    </div>
    <div class="clearfix"> </div>
</li>

Then use JS to switch which icon is visible:

const toggler = document.querySelector('.sidebar-toggler');
const icons = toggler.querySelectorAll('.toggle-icon');

toggler.addEventListener('click', function() {
  icons.forEach(icon => {
    icon.style.display = icon.style.display === 'none' ? 'block' : 'none';
  });
  // Add your sidebar logic here
});

方法3: Local Font Icons #

If you have a local font icon library (e.g., Font Awesome files stored in your project), use an <i> tag and toggle classes:

<li class="sidebar-toggler-wrapper">
    <div class="sidebar-toggler">
      <i class="fa fa-bars"></i>
    </div>
    <div class="clearfix"> </div>
</li>

Add basic CSS for styling:

.sidebar-toggler i {
  font-size: 20px;
  color: #333;
  cursor: pointer;
}

Then toggle the icon classes with JS:

const toggler = document.querySelector('.sidebar-toggler');
const icon = toggler.querySelector('i');

toggler.addEventListener('click', function() {
  icon.classList.toggle('fa-bars');
  icon.classList.toggle('fa-times');
  // Add your sidebar expand/collapse logic here
});

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