https://yangsizhe.github.io/robo3r/static/js/index.js

1document.addEventListener('DOMContentLoaded', function() {
2  // Button to show/hide additional demos
3  const showMoreButton = document.getElementById('show-more-demos');
4  const additionalDemos = document.getElementById('additional-demos');
5  
6  // 添加调试信息
7  console.log('DOM loaded, initializing button functionality');
8  console.log('Button found:', !!showMoreButton);
9  console.log('Additional demos section found:', !!additionalDemos);
10  
11  if (showMoreButton && additionalDemos) {
12    // 确保初始状态正确
13    additionalDemos.style.display = 'none';
14    
15    // 设置初始按钮文本
16    const buttonText = showMoreButton.querySelector('span:first-child');
17    if (buttonText) {
18      buttonText.innerHTML = '<strong>Show More Demos</strong>';
19    }
20    
21    showMoreButton.addEventListener('click', function(e) {
22      e.preventDefault(); // 防止默认行为
23      console.log('Button clicked');
24      
25      // 使用计算样式而不是内联样式来检查可见性
26      const computedStyle = window.getComputedStyle(additionalDemos);
27      const isHidden = computedStyle.display === 'none';
28      console.log('Is hidden:', isHidden);
29      
30      // Toggle visibility
31      additionalDemos.style.display = isHidden ? 'flex' : 'none';
32      
33      // Update button text and icon
34      const buttonText = showMoreButton.querySelector('span:first-child');
35      const buttonIcon = showMoreButton.querySelector('.fas');
36      
37      if (buttonText && buttonIcon) {
38        if (isHidden) {
39          buttonText.innerHTML = '<strong>Hide Demos</strong>';
40          buttonIcon.classList.remove('fa-chevron-down');
41          buttonIcon.classList.add('fa-chevron-up');
42        } else {
43          buttonText.innerHTML = '<strong>Show More Demos</strong>';
44          buttonIcon.classList.remove('fa-chevron-up');
45          buttonIcon.classList.add('fa-chevron-down');
46        }
47      }
48    });
49    
50    console.log('Button event listener attached');
51  } else {
52    console.error('Button or additional demos section not found');
53  }
54  
55  // 添加备用初始化方法，以防DOMContentLoaded已经触发
56  if (document.readyState === 'complete' || document.readyState === 'interactive') {
57    console.log('Document already loaded, checking elements again');
58    setTimeout(function() {
59      const showMoreButton = document.getElementById('show-more-demos');
60      const additionalDemos = document.getElementById('additional-demos');
61      
62      if (showMoreButton && additionalDemos && !showMoreButton.hasAttribute('data-initialized')) {
63        console.log('Initializing button after delay');
64        showMoreButton.setAttribute('data-initialized', 'true');
65        
66        // 确保初始状态正确
67        additionalDemos.style.display = 'none';
68        
69        showMoreButton.addEventListener('click', function(e) {
70          e.preventDefault();
71          const computedStyle = window.getComputedStyle(additionalDemos);
72          const isHidden = computedStyle.display === 'none';
73          
74          additionalDemos.style.display = isHidden ? 'flex' : 'none';
75          
76          const buttonText = showMoreButton.querySelector('span:first-child');
77          const buttonIcon = showMoreButton.querySelector('.fas');
78          
79          if (buttonText && buttonIcon) {
80            if (isHidden) {
81              buttonText.innerHTML = '<strong>Hide Demos</strong>';
82              buttonIcon.classList.remove('fa-chevron-down');
83              buttonIcon.classList.add('fa-chevron-up');
84            } else {
85              buttonText.innerHTML = '<strong>Show More Demos</strong>';
86              buttonIcon.classList.remove('fa-chevron-up');
87              buttonIcon.classList.add('fa-chevron-down');
88            }
89          }
90        });
91      }
92    }, 500);
93  }
94});