Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Нужна раскрывающаяся таблица (https://javascript.ru/forum/dom-window/49361-nuzhna-raskryvayushhayasya-tablica.html)

7Lexus 09.08.2014 22:29

Нужна раскрывающаяся таблица
 
Доброго дня!
Очень хочется иметь вот такую таблицу


Как вы уже поняли заголовки должны раскрываться и закрываться в том месте, где плюс/минус

Попытки сделать что-то подобное были вот тут и вот здесь

Но в идеале хотелось бы некое универсальное решение, гибкое к изменениям (например увеличение, уменьшение количества ветвлений)

Сразу скажу - в программировании не силен.
Буду благодарен всем, кто может помочь.

Rise 10.08.2014 05:11

7Lexus, html разметку для начала сделайте.

7Lexus 10.08.2014 08:01

Цитата:

Сообщение от Rise (Сообщение 325124)
7Lexus, html разметку для начала сделайте.

Да вот в этом тоже как бы проблема.
Нежелательно, чтобы разметка была через списки. У меня сайт на Битриксе и почему-то как ни извращайся - маркеры списка не убираются и вид из-за этого довольно нелепый. (слева от плюс/минус остаются черные кружочки и никакое list-style-type: none не помогает)
Нужно, чтобы использовалась только таблица.
Помогите хотя бы выбрать правильное направление... натолкните на мысль.

Rise 10.08.2014 08:33

7Lexus,
Таблица1:
	1-я строка "Уровень1" [+]
	2-я строка "Уровень1"(скрыта):
		Таблица2:
			1-я строка "Уровень2" [+]
			2-я строка "Уровень2"(скрыта):
				Таблица3:
					1-я строка "Уровень3"
					2-я строка "Уровень3"
					3-я строка "Уровень3"
			3-я строка "Уровень2" [+]
			4-я строка "Уровень2"(скрыта):
				Таблица3:
					1-я строка "Уровень3"
					2-я строка "Уровень3"
					3-я строка "Уровень3"
	3-я строка "Уровень1" [+]
	4-я строка "Уровень1"(скрыта):
		Таблица2:
			1-я строка "Уровень2" [+]
			2-я строка "Уровень2"(скрыта):
				Таблица3:
					1-я строка "Уровень3"
					2-я строка "Уровень3"
					3-я строка "Уровень3"
			3-я строка "Уровень2" [+]
			4-я строка "Уровень2"(скрыта):
				Таблица3:
					1-я строка "Уровень3"
					2-я строка "Уровень3"
					3-я строка "Уровень3"

ixth 10.08.2014 09:21

Цитата:

Сообщение от 7Lexus (Сообщение 325126)
Да вот в этом тоже как бы проблема.
Нежелательно, чтобы разметка была через списки. У меня сайт на Битриксе и почему-то как ни извращайся - маркеры списка не убираются и вид из-за этого довольно нелепый. (слева от плюс/минус остаются черные кружочки и никакое list-style-type: none не помогает)

Не благодарите.
#page-content ul, #page-content ul li {
    list-style: none !important;
}

7Lexus 10.08.2014 12:20

Если это всё, то ладно.... хорошо, спасибо )))
... вряд ли я поумнею )))

7Lexus 10.08.2014 16:50

Цитата:

Сообщение от ixth
Не благодарите.

Да я бы и поблагодарил, если бы оно решало проблему.
...не прокатывает

ixth 10.08.2014 16:58

Я проверял прямо на сайте, буллеты исчезают.

Rise 10.08.2014 17:00

7Lexus, а чего вы ждали, я вам дал направление, сделайте таблицу, а там посмотрим куда дальше двигаться.

7Lexus 13.08.2014 19:21

Решение уже есть. Осталось за малым.
Хочется, чтобы плюс после раскрытия ветки менялся на минус.

Помогите сделать.

Исходники

рони 14.08.2014 07:55

Цитата:

Сообщение от 7Lexus
Хочется, чтобы плюс после раскрытия ветки менялся на минус.

http://javascript.ru/forum/jquery/45...tml#post303953

7Lexus 14.08.2014 10:13

Цитата:

Сообщение от рони
Селектор изменяет и потомков.

а можно уже готовое решение?
я ведь не соображу никак.

рони 14.08.2014 10:15

7Lexus,
вставьте 2 картинки сразу и показывайте по клику одну из них меня класс

рони 14.08.2014 10:38

7Lexus,
http://learn.javascript.ru/play/qIiXQb

7Lexus 14.08.2014 10:58

Цитата:

Сообщение от рони (Сообщение 325788)

О, ЭТО ЗДОРОВО!
... спасибо вам огромное!
.. ну помогите ещё выравнять картинку (плюс/минус) относительно текста и границ таблицы, чтоб было ровненько.
...пожалуйста!

рони 14.08.2014 11:03

7Lexus,
:no:

7Lexus 14.08.2014 11:13

:cray:

7Lexus 14.08.2014 12:32

Блин.. ну что же делать-то?... замучался уже ничего не получается ((

DynkanMaclaud 14.08.2014 14:35

Ссылка

Тут только вместо '-' меняется background-color;)))

7Lexus 14.08.2014 15:46

Цитата:

Сообщение от DynkanMaclaud (Сообщение 325861)
Ссылка

Тут только вместо '-' меняется background-color;)))

а если кликать не по плюсику, то и ничего, собссно не происходит

спасибо хоть на этом.... буду дальше что-то думать

skrudjmakdak 14.08.2014 16:03

http://mbraak.github.io/jqTree/#demo
http://www.jqueryrain.com/?X1gUmjkK
http://www.jstree.com/demo/

7Lexus 14.08.2014 17:27

skrudjmakdak,
Спасибо, но там всё на основе списков.
А я уже говорил выше - Битрикс в этом смысле очень подводит и не дает маркеры спрятать.

Вот это решение меня устраивает вообще, я не могу добиться выравнивания элементов.

ixth 14.08.2014 20:53

Цитата:

Сообщение от 7Lexus (Сообщение 325913)
skrudjmakdak,
Спасибо, но там всё на основе списков.
А я уже говорил выше - Битрикс в этом смысле очень подводит и не дает маркеры спрятать.

Я писал как спрятать маркеры.

7Lexus 14.08.2014 21:18

ixth,
да, я внимательно читал и пробовал.
...НИКАК! У меня - никак.

skrudjmakdak 15.08.2014 08:56

сколько пишу на js, а вот что за маркеры слышу первый раз)) че это такое??))

skrudjmakdak 15.08.2014 09:16

ааа ul li)) туплю. ну так цсс определите как сказал 7Lexus. откройте фаербаг, посмотрите что да как. какие классы у элементов. на крайняк скиньте скрин, посм что у вас криво

7Lexus 15.08.2014 15:15

Тема закрыта, поскольку проблема решена.
Всем спасибо!

skrudjmakdak,
проблема осталась, но не суть.
решилось всё через <tr><td>


Часовой пояс GMT +3, время: 01:32.