使用JavaScript实现列表滑动切换与地图联动显示的问题求助

Hey there! Let's fix that map display logic issue you're having. The core problem right now is your code handles map visibility directly inside each click handler, which creates messy conflicts when switching between lists—since there's no centralized check for all sublist states. Here's a clean, reliable fix:

问题根源 #

Your current code tries to toggle maps within individual click events without a unified way to check the visibility of both sublists. This leads to conflicting state checks, especially when switching between lists, and you might be checking visibility before slide animations finish (since jQuery animations are asynchronous).

修复方案 #

We'll extract the map display logic into a single function that checks both sublists' states every time something changes. This ensures we always follow your rules consistently, no matter how the user interacts with the lists.

修改后的完整代码 #

JavaScript

$(document).ready(function(){
  // Centralized function to handle map display based on sublist states
  function updateMapDisplay() {
    const isSub1Visible = $('.listSub1').is(':visible');
    const isSub2Visible = $('.listSub2').is(':visible');
    
    // Hide all maps first to avoid overlap
    $('.map_0, .map_1, .map_2').fadeOut(500);
    
    // Apply your display rules
    if (!isSub1Visible && !isSub2Visible) {
      $('.map_0').fadeIn(500);
    } else if (isSub1Visible && !isSub2Visible) {
      $('.map_1').fadeIn(500);
    } else if (!isSub1Visible && isSub2Visible) {
      $('.map_2').fadeIn(500);
    }
  }

  $("#listItem1").click(function(){
    $(".listSub1").slideToggle(500, function() {
      // Update maps AFTER the slide animation finishes
      updateMapDisplay();
    });
    $('.listSub2').slideUp(500, function() {
      updateMapDisplay();
    });
  });

  $("#listItem2").click(function(){
    $(".listSub2").slideToggle(500, function() {
      updateMapDisplay();
    });
    $('.listSub1').slideUp(500, function() {
      updateMapDisplay();
    });
  });
  
  // Set initial state on page load
  updateMapDisplay();
});

CSS

ul { list-style-type:none; }
.container{ width:100%; background-color:white; }
.trail_headings{ border: 1px solid rgba(255, 255, 255, 0.7); text-align:center; background-color:none; width:95%; margin-left:0.5rem; border-radius:0.1rem; cursor:pointer; display:block; }
.listSub1,.listSub2{ display:none; }
.map_1, .map_2{ display:none; }

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <!-- first list-->
    <li class="trail_headings" id="listItem1">
      <div><h1>Lake District</h1></div>
    </li>
    <li><div class="listSub1" id="1A">Grange to High Spy</div></li>
    <li><div class="listSub1" id="1C">Scaffel Pike</div></li>
    <!-- second list-->
    <li class="trail_headings" id="listItem2">
      <div><h1>Peak District</h1></div>
    </li>
    <li><div class="listSub2">The Crowden Horseshoe</div></li>
    <li><div class="listSub2">Edale to Kinder Scout</div></li>
  </ul>
</div>
<div class="map_0"> 0 </div>
<div class="map_1"> 1 </div>
<div class="map_2"> 2 </div>

关键改进点 #

• Centralized State Checks: The updateMapDisplay() function always checks both sublists' visibility at once, strictly following your rules without conflicts.
• Animation Callbacks: We only check states after slide animations finish, so we never get incorrect visibility values mid-animation.
• Initialization: The function runs once on page load to ensure the correct starting state (map_0 visible).

Now whether you click a single list multiple times or switch between lists, the map display will always match your requirements perfectly!

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