Javascript - Загрузка нескольких функций onLoad

Я начал изучать javascript на этой неделе, и я обдумываю основы. Я начал создавать раздел «FAQ» для страницы, в которой используется тумблер, чтобы открывать и закрывать целевые div.Javascript - Загрузка нескольких функций onLoad

Однако по умолчанию дисплей div установлен на видимый. Я поместил функцию, которая будет скрывать ее, так что выпадающее меню сбрасывается при загрузке страницы. Я попытался уложить их (функция переключения и функции отображения), разделив их на пол-двоеточия внутри «onLoad» в теге body.

Теперь, прежде чем я применил эти функции для запуска «onLoad», оба работали нормально. Однако теперь работает только вторая функция, которая переключает divs, но функция, указывающая на то, что divs свалилась onLoad, не является.

В каком месте я ошибаюсь?

Кроме того, видя, как я новичок в этом, если есть лучший способ, или более сокращенная версия этого не стесняйтесь, дайте мне знать :)

CSS:

body { 
background-color: #cccccc; 
padding: 0; 
margin: 0; 
} 

.container { 
    margin-left: 20%; 
    margin-right: 20%; 
    background-color: white; 
    padding: 1em 3em 1em 3em; 
} 
.toggle-header { 
    padding: 0.5em; 
    background-color: #0067b1; 
    overflow: auto; 
} 

#toggle { 
    border: none; 
    width: 300; 
    height: 3em; 
    background-color: #0067b1; 
    outline: 0;  
} 

.button-container { 
    float: right; 
    margin-right: 0.5em;  
    display: inline-block; 
} 

.dropdowns { 
    padding: 2em; 
    background-color: #eeeeee; 
}

HTML & Javascript:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Toggle Template</title> 
</head> 

<body onLoad="toggleOnLoad(); toggleFunction()"> 

<div class="container"> 
    <div class="toggle-header"> 
     <div class="button-container" title=""> 
      <button id="toggle" onClick="toggleFunction()">  
       <img id="toggle-image" src="" alt="toggle" style="max-height: 100%; max-width: 100%"> 
      </button> 
     </div> 
    </div> 
    <div id="dropdown01" class="dropdowns"> 
     <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span> 
    </div> 
</div> 

<script> 
function toggleOnLoad() { 
    document.getElementById('dropdown01').style.display = 'none'; 
} 

function toggleFunction() { 
    var dropDown = document.getElementById('dropdown01'); 
    var dropDownCollapse = document.getElementById('toggle-image').src = "Images/banner_toggle_collapse.png"; 
    var dropDownExpand = document.getElementById('toggle-image').src = "Images/banner_toggle_expand.png"; 

    if (dropDown.style.display != 'none') { 
     dropDown.style.display = 'none'; 
     document.getElementById('toggle-image').src = dropDownExpand; 
    } else { 
     dropDown.style.display = ''; 
     document.getElementById('toggle-image').src = dropDownCollapse; 
    } 

} 
</script> 

</body> 
</html>

источник

2015-11-18 MarkHughes88

блестящий, спасибо! это сработало! я должен был изменить «Окно» на «окно», поскольку он не собирал его со столицей «W», но теперь он отлично работает. Мне пришлось переместить мои переменные из функции toggleFunction(), чтобы сделать их глобальными, чтобы их можно было подобрать, но кроме этого ваше решение отлично работало :) – MarkHughes88

Javascript - Загрузка нескольких функций onLoad

ответ

Смежные вопросы