窗口宽度≤980px时自动隐藏段落并实现点击切换的方案咨询

Got it, let's break down how to solve this exactly as you need it. You want two core features: automatically hide the second paragraph when the browser window is 980px or smaller, and let the "Read More" button toggle its visibility (with no leftover whitespace when hidden). Here's a straightforward, vanilla implementation that checks all boxes:

1. Updated HTML #

First, I'll tweak your HTML slightly for better semantics (using a <button> instead of an <a> since this is an action, not a link, but I'll note how to keep the anchor if you prefer):

<p>Content1 
  <button class="toggle-btn" onClick="toggleText()">Read More</button>
</p>
<p class="toggle-content">Hiding content2 [now no extra whitespace when hidden]</p>

Note: If you must use an <a> tag, add href="javascript:void(0)" to prevent page jumps: <a class="toggle-btn" href="javascript:void(0)" onClick="toggleText()">Read More</a>

2. CSS for Responsive Hiding & Whitespace Fix #

The key here is using display: none (not visibility: hidden) to completely remove the element from the layout when hidden, eliminating any leftover whitespace. We'll use a media query to trigger this on small screens:

/* Hide the target content by default on screens ≤980px */
@media (max-width: 980px) {
  .toggle-content {
    display: none;
  }
}

/* Optional: Style the button for better usability */
.toggle-btn {
  background: #2563eb;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 8px;
  font-size: 0.9em;
}

.toggle-btn:hover {
  background: #1d4ed8;
}

3. JavaScript Toggle Logic #

We'll write a function that toggles the content's visibility, updates the button text, and handles the initial state set by the CSS media query:

function toggleText() {
  const content = document.querySelector('.toggle-content');
  const button = document.querySelector('.toggle-btn');

  // Handle both cases: CSS-hidden state (on load) and manual toggle state
  const isHidden = content.style.display === 'none' || 
                   (window.innerWidth <= 980 && content.style.display === '');

  if (isHidden) {
    content.style.display = 'block';
    button.textContent = 'Read Less';
  } else {
    content.style.display = 'none';
    button.textContent = 'Read More';
  }
}

4. Bonus: Handle Window Resize #

If the user resizes the window between desktop and mobile sizes, we want to reset the state to match the current screen size:

// Sync state when window is resized
window.addEventListener('resize', () => {
  const content = document.querySelector('.toggle-content');
  const button = document.querySelector('.toggle-btn');

  if (window.innerWidth <= 980) {
    content.style.display = 'none';
    button.textContent = 'Read More';
    button.style.display = 'inline-block'; // Show button on mobile
  } else {
    content.style.display = 'block'; // Keep content visible on desktop
    button.style.display = 'none'; // Hide button on desktop (optional)
  }
});

// Initialize state on page load
window.dispatchEvent(new Event('resize'));

Optional: If you want the button to appear on desktop too, remove the button.style.display = 'none' line in the else block.

Key Notes #

• display: none ensures no whitespace remains when the content is hidden (unlike visibility: hidden, which keeps the element's space in the layout)
• The media query ensures automatic hiding on small screens without any JS needed initially
• The resize listener keeps the state consistent if the user adjusts their window size
• Button text updates make the user experience clearer

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