关于使用jQuery animate()实现两列展开与收起的交互问题咨询

Got it, let's build this column toggle feature together. Since you're new to jQuery, I'll break this down into simple, reusable parts with straightforward explanations.

Step 1: Basic HTML Structure #

First, let's set up the two columns and their toggle buttons. Clear class names will make the jQuery logic easier to write and maintain:

<div class="column-container">
  <div class="column left-col">
    <button class="toggle-btn btn-left">Toggle Left Column</button>
    <p>Left column content here – feel free to replace this with your own text or elements!</p>
  </div>
  <div class="column right-col">
    <button class="toggle-btn btn-right">Toggle Right Column</button>
    <p>Right column content here – adjust this to match your needs.</p>
  </div>
</div>

Step 2: CSS for Initial Layout #

We'll style the columns to sit side-by-side by default, and add basic styling to keep things clean and functional:

.column-container {
  display: flex;
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;
  margin: 20px 0;
}

.column {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden; /* Prevents content from spilling when columns shrink */
}

.left-col {
  background-color: #f0f8ff;
}

.right-col {
  background-color: #ffe4e1;
}

.toggle-btn {
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background-color: #4CAF50;
  color: white;
  margin-bottom: 15px;
}

Step 3: jQuery Animation Logic #

This is the core of the feature. We'll use jQuery's animate() method to adjust column widths, and track the current state with a CSS class (expanded) to know whether to expand or collapse the columns:

$(document).ready(function() {
  // Handle left column toggle
  $('.btn-left').click(function() {
    const $leftCol = $('.left-col');
    const $rightCol = $('.right-col');
    
    if ($leftCol.hasClass('expanded')) {
      // Restore to initial 50/50 layout
      $leftCol.animate({ width: '50%' }, 300);
      $rightCol.animate({ width: '50%' }, 300);
      $leftCol.removeClass('expanded');
    } else {
      // Expand left column to full width, shrink right to hidden
      $leftCol.animate({ width: '100%' }, 300);
      $rightCol.animate({ width: '0%' }, 300);
      $leftCol.addClass('expanded');
    }
  });

  // Handle right column toggle
  $('.btn-right').click(function() {
    const $leftCol = $('.left-col');
    const $rightCol = $('.right-col');
    
    if ($rightCol.hasClass('expanded')) {
      // Restore to initial 50/50 layout
      $leftCol.animate({ width: '50%' }, 300);
      $rightCol.animate({ width: '50%' }, 300);
      $rightCol.removeClass('expanded');
    } else {
      // Expand right column to full width, shrink left to hidden
      $leftCol.animate({ width: '0%' }, 300);
      $rightCol.animate({ width: '100%' }, 300);
      $rightCol.addClass('expanded');
    }
  });
});

Key Details to Note: #

• $(document).ready() ensures our code runs only after the page is fully loaded—this is critical for jQuery to find the elements we're targeting.
• We use hasClass() to check if a column is already expanded, which tells us whether to toggle to the expanded or collapsed state.
• The animate() method takes two main arguments: the CSS property to modify (width here) and the animation duration (300ms = 0.3 seconds, which feels smooth without being too slow).
• overflow: hidden in the CSS ensures that when a column shrinks to 0%, its content doesn't leak out into the other column.

Optional Enhancement: #

If you want to hide the button of the collapsed column (so only the expanded column's button is visible), you can add .toggle() to the button in the animate callback. For example, in the left column expand block:

// Hide right button, show left button
$rightCol.find('.toggle-btn').toggle();
$leftCol.find('.toggle-btn').toggle();

Add the same line to the restore block to bring the buttons back when the layout resets.

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