关于特定元素显示/隐藏功能的问题及代码求助

Let’s break down the potential issues in your code and fix them step by step:

1. Incomplete/Misspelled Code in the #ProButton Handler #

Your snippet cuts off at secondColumn.style.displa...—this is almost certainly a typo (missing the final y in display) or an incomplete statement. For example, if you intended to toggle the columns opposite to the #StartersButton behavior, the fix would look like:

'click #ProButton' : function() { 
  var secondColumn = document.getElementById("secondColumn"); 
  var thirdColumn = document.getElementById("thirdColumn"); 
  if($(window).width() < 800 ) { 
    secondColumn.style.display = "none"; // Fixed the typo and set opposite state
    thirdColumn.style.display = "inline"; 
  } 
},

Without correcting this, the #ProButton will throw a syntax error or fail to modify the columns as intended.

2. No Behavior for Screen Widths ≥ 800px #

Right now, your code only modifies column visibility when the window is smaller than 800px. If you expect columns to reset to their default state on larger screens (or have specific behavior), you’re missing an else clause. For example:

if($(window).width() < 800 ) { 
  // Mobile behavior
  secondColumn.style.display = "inline"; 
  thirdColumn.style.display = "none"; 
} else {
  // Desktop behavior (reset to default or custom state)
  secondColumn.style.display = "block"; // Or whatever your default is
  thirdColumn.style.display = "block";
}

3. Mixing Vanilla JS and jQuery (Inconsistency & Null Risks) #

You’re using document.getElementById() (vanilla JavaScript) alongside $(window).width() (jQuery). This isn’t a bug, but it can lead to errors if the elements don’t exist in the DOM—getElementById() returns null for missing elements, and accessing style.display on null will throw an error.

Switching to jQuery selectors makes this safer and more consistent:

'click #StartersButton' : function() { 
  var secondColumn = $("#secondColumn"); 
  var thirdColumn = $("#thirdColumn"); 
  if($(window).width() < 800 ) { 
    secondColumn.css("display", "inline"); 
    thirdColumn.css("display", "none"); 
  } 
},

jQuery handles empty selections gracefully, so no errors if the columns are missing.

4. Potential CSS Conflicts #

If your columns use CSS classes that set display (e.g., flex, grid, or custom layout classes), directly setting display: inline via JavaScript might override those styles in unexpected ways. A better approach is to use CSS classes to control visibility:

/* Add to your stylesheet */
.column-hidden { display: none !important; }
.column-inline { display: inline !important; }

Then update your JS to add/remove classes instead of modifying inline styles:

'click #StartersButton' : function() { 
  var secondColumn = $("#secondColumn"); 
  var thirdColumn = $("#thirdColumn"); 
  if($(window).width() < 800 ) { 
    secondColumn.addClass("column-inline").removeClass("column-hidden"); 
    thirdColumn.addClass("column-hidden").removeClass("column-inline"); 
  } 
},

This keeps style logic in CSS where it belongs and avoids conflicts.

5. Hardcoded Breakpoint Misalignment #

Using a fixed 800px breakpoint might not match your CSS media queries. For better consistency, use matchMedia to detect the exact breakpoint your CSS uses:

'click #StartersButton' : function() { 
  const isMobile = window.matchMedia("(max-width: 799px)").matches; // Matches <800px
  var secondColumn = $("#secondColumn"); 
  var thirdColumn = $("#thirdColumn"); 
  if(isMobile) { 
    secondColumn.css("display", "inline"); 
    thirdColumn.css("display", "none"); 
  } 
},

This ensures your JS behavior aligns perfectly with responsive CSS rules.

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