Список внутри блока ломает всю картину

Тема в разделе "jQuery", создана пользователем 7Lexus, 14 окт 2016.

  1. 7Lexus

    7Lexus Участник

    Здравствуйте.
    Подработал для себя новостную ленту. Нужна была именно в таком виде, чтобы присутствовала иерархия и все "свежие" заголовки были уже открыты для прочтения.
    Но вот неожиданно возникла проблема с которой не получается справится уже который день.

    Стоит только в текст новости поместить маркированный или нумерованный список,
    Код:
    <ul>
        <li>строка 1</li>
        <li>строка 2</li>
        <li>__.....__</li>
        <li>строка N</li>
      </ul>
    как тут же сам список и остальная текстовая часть перестают прятаться под спойлером и портятя всю картину.

    Где собака зарыта?

    Сам код на CODEPEN
     
  2. Елена Назарова

    Елена Назарова Администратор Команда форума

    Здравствуйте. Для начала давайте смоделируем ситуацию, вот три картинки:
    image1.png image2.png image3.png

    У вас происходит то же самое?
     
  3. Елена Назарова

    Елена Назарова Администратор Команда форума

  4. 7Lexus

    7Lexus Участник

    Вот моя отрицательная сторона, наверное, что я изо всех сил стараюсь и у меня никак не получается сформулировать вопрос так, чтобы не было сомнений.
    upload_2016-10-14_21-17-33.png
     
  5. Елена Назарова

    Елена Назарова Администратор Команда форума

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

    Вложения:

  6. 7Lexus

    7Lexus Участник

    Спасибо, Елена, но это не совсем то.

    А можно ли вот в этом коде сделать так, чтобы при открытии страницы вид был как НА ВТОРОЙ КАРТИНКЕ?

    картинка 1 (как сейчас)
    upload_2016-10-17_21-56-33.png

    Картинка 2 (как хотелось бы)
    upload_2016-10-17_22-0-0.png
     
  7. Елена Назарова

    Елена Назарова Администратор Команда форума

    Я не сталкивалась с такими сложными аккордеонами, плагины сама не пишу, практики мало. Посмотрев, что есть в интернете, не нашла других примеров. На таблицах меню уже давно не верстает.
    Я бы на вашем месте так не усложняла, сделайте обычный многоуровневый список. То что не нужно - скройте display:none и добавьте смену этого значения для события onclick.
     
    Последнее редактирование: 18 окт 2016
    7Lexus нравится это.
  8. 7Lexus

    7Lexus Участник

    Я либо всё-таки откажусь просто от использования списков внутри новости, либо придется воспользоваться стандартным инфо-блоком 1С:Битрикса.
    Конечно, это будет не так красочно, но зато без этих заморочек )
     
  9. Елена Назарова

    Елена Назарова Администратор Команда форума

    Знаете, как показывается практика, эти "красивости" нужны только нам. Среднестатистический пользователь даже не обратит на них внимание. Можно попробовать выделить строки цветом, подобрав на сайте https://coolors.co/31393c-2176ff-33a1fd-fdca40-f79824 альтернативные полутона (нужно нажать сверху справа значок из 9 квадратиков), а основной цвет можно добавить свой. Или же поиграть с размером шрифта, верхний уровень - большим размером шрифта, каждый последующий уменьшать на 1px например.
     
    7Lexus нравится это.

Поделиться этой страницей