Блог

Главная - Вопросы по программированию - Расширение области публикации

Расширение области публикации

#javascript #jquery #html #expand

#javascript #jquery #HTML #Развернуть

Вопрос:

Вот готовый дизайн:

Вот (сломанная) скрипка: http://jsfiddle.net/rlesko/f3R7r/4 /

Могу ли я использовать HTML5 или js или что-нибудь еще, чтобы при нажатии на текст «Развернуть >>» белый фон расширялся вправо примерно на 200 пикселей? И когда она расширяется, текст меняется на «<< Контракт» и делает обратное? Заголовок и текст абзаца также должны расширяться вслед за белым фоном.

Ответ №1:

Итак, расширяя вашу скрипку, это примерно то, на что вы будете смотреть. А чтобы анимировать ее вместо этого, вы можете просто использовать .animate().

Но есть намного более эффективные способы выполнить то, что вы делаете. Если у вас нет конкретной причины для форматирования страницы в этом manor (что вполне возможно, учитывая, что это выглядит как извлеченный тестовый пример) Я бы сделал внутреннюю ширину div соответствующей внешнему div плюс некоторое поле, а затем вместо этого расширил внешний div. То же самое касается вашего заголовка. Вместо того, чтобы использовать ширину, я бы попробовал поля слева и справа, чтобы добиться желаемого эффекта, чтобы упростить динамическое изменение размера.

Комментарии:

1. Да, это именно то, чего я хотел. Я буду использовать это как средство для отображения публикации в полноэкранном режиме. Я буду использовать его на одной странице публикации, но в полном дизайне справа есть боковая панель, и я бы хотел, чтобы эта боковая панель исчезла после щелчка, а область публикации расширилась вправо, где была боковая панель. Спасибо, ваш код, несомненно, поможет!

2. Джеймс Джонсон, не знаю, увидите ли вы этот ответ или нет, но если увидите, пожалуйста, скажите мне, где я могу найти те коды, которые вы опубликовали в качестве ответа, прежде чем удалять его. Или, по крайней мере, скажите мне, что искать при их поиске. Приветствия!

3. Ktash, я добавил код js и .expanded class (в CSS) на свой сайт, и это не работает. Не знаю почему, есть идеи? Я что-то пропустил?

4. Я бы проверил классы и селекторы, чтобы убедиться, что они верны. Кроме того, убедитесь, что .expanded класс объявлен либо после класса с шириной в CSS, либо имеет !important флаг на нем.

5. Когда я копирую / вставляю свои HTML, CSS и js в fiddle, это работает, но когда я использую это в полном дизайне, это не работает! Могу ли я отправить вам весь код моего веб-сайта (приватно), чтобы вы могли понять, почему это расширение не работает?