วิธีที่ดีที่สุดในการสร้างรายการปุ่ม/ลิงก์แบบไดนามิกคืออะไร

จากที่กล่าวมาข้างต้น - หากแผงที่ป็อปอัปของคุณเป็นเพียงเมนูย่อยที่มีลิงก์อยู่ในนั้น ลิงก์ <a href="/th#"> ก็น่าจะดี

แต่ถ้าแผงที่ป็อปอัปเป็น form ที่ทำให้เกิดการเปลี่ยนแปลงบางอย่างในเซิร์ฟเวอร์ (เช่น เพิ่มสินค้าลงในรถเข็น ฯลฯ) ดังนั้น <button> จะดีกว่าที่จะสื่อถึงวัตถุประสงค์ที่แท้จริงของแผง

ในการสร้างเลย์เอาต์ แนวทางปฏิบัติที่ดีที่สุดในปัจจุบันคือการใช้ <ul> วนซ้ำกล่องอาหารทั้งหมดของคุณ และสร้างองค์ประกอบ <li> สำหรับแต่ละกล่อง จากนั้นใช้ CSS เพื่อตั้งค่าและความสูงของแต่ละกล่อง และใช้ JavaScript เพื่อเปิดแผงขึ้นมา

ตัวอย่างเช่นสิ่งนี้:

<ul class="mealboxes">
  <li class="mealbox"><button id="box1" class="mealbox">Meal Box 1</button></li>
  <li class="mealbox"><button id="box2" class="mealbox">Meal Box 2</button></li>
  <li class="mealbox"><button id="box3" class="mealbox">Meal Box 3</button></li>
</ul>

การใช้คลาสแนบ CSS และคลิกตัวจัดการเหตุการณ์ และใช้รหัสปุ่ม คุณจะรู้ว่ามีการคลิกปุ่มกล่องอาหารใด ดังนั้นคุณจึงสามารถเปิดแผงที่ถูกต้องขึ้นมาได้

PS: หากต้องการซ่อนสัญลักษณ์แสดงหัวข้อย่อยในรายการ ให้ใช้ CSS ที่คล้ายกับสิ่งนี้:

ul.mealboxes {
 list-style: none;
}