Как я могу сдвинуть элемент, скрытый внешним CSS, с помощью Scriptaculous? - PullRequest
Новая
       12

Как я могу сдвинуть элемент, скрытый внешним CSS, с помощью Scriptaculous?

1 голос
/ 08 сентября 2011

У меня есть это меню: 

<ul id="nav">
<li class="level0">Item 1</li>
<li class="level0 parent">
    <a><span>Click Me!</span></a>
    <div class="submenu">
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </div>
</li>
</ul>

Я хочу скрыть подменю при загрузке страницы.Когда пользователь щелкает родительский элемент, должно появиться подменю.

Когда я использую встроенный CSS, как это, все работает нормально. 

<div class="submenu" style="display:none;">

См. Эту демонстрацию: http://jsfiddle.net/zJk6P/(Нажмите «Click me» в правом нижнем углу, чтобы запустить демонстрацию.)

Когда я использую такой внешний CSS, подменю больше не появляется. 

#nav div.submenu{
display: none;
}

Смотрите этодемо: http://jsfiddle.net/5tNqc/4/

Почему есть какая-то разница и как я могу получить эффект скольжения для работы с внешним CSS?

Ответы [ 2 ]

1 голос
/ 12 сентября 2011

Причина, по которой мой код не работал, заключалась в том, что Javascript не имеет доступа к внешним объявлениям стилей CSS. Только встроенные стили доступны через element.style.

Effect.toggle(element, 'slide'); пытается сдвинуть элемент вниз, когда элемент не отображается, и вверх, когда элемент отображается. Поэтому, когда элемент скрыт внешней таблицей стилей, Effect.toggle попытается сдвинуть элемент вверх, потому что он просто не «знает», что элемент уже скрыт.

Решение - работать с именами классов. Мое окончательное решение проверяет, имеет ли элемент определенное имя класса. Когда присутствует имя класса, элемент еще не щелкнут, поэтому элемент перемещается вниз и имя класса удаляется. При всех следующих щелчках элемент переключается.

Я собрал и загрузил небольшую демонстрацию здесь: http://i.amniels.com/ext/stackexchange/2011-09/index.html

0 голосов
/ 08 сентября 2011

Разница в том, что вы не меняете display на значение display: block;, которое является стандартом, и поэтому оно переопределяется внешним явным определением, что его следует скрыть. Если вы добавите еще одну строку в Javascript, чтобы добавить thisDiv.style.display = block;, и удалите ее в конце, чтобы скрыть ее, она должна работать очень хорошо.

Обновление:

Итак, причина, по которой он не отображается, когда у вас есть display: none; в вашем CSS-файле, заключается в том, что, когда запускается анимация Javascript, вместо установки display: block; в вашем div, который сделает его видимым, он просто полностью удаляет свойство display элемента, поэтому на него все еще влияет внешний CSS.

Мое предложение : если вы не хотите, чтобы Javascript становился более сложным, просто оставьте стиль встроенным, чтобы впоследствии он мог быть удален Javascript автоматически. Если вы хотите использовать внешний стиль CSS для него, вы можете просто добавить короткую вспомогательную функцию в свой Javascript, чтобы изменить свойство CSS display для блокировки при каждом его запуске, и установить его на display: none после завершения анимации.

...