Создать <select>из списка - сделать отступ для дочерних элементов? - PullRequest
Новая
       32

Создать <select>из списка - сделать отступ для дочерних элементов?

2 голосов
/ 20 февраля 2012

У меня есть меню UL LI, которое я превращаю в выпадающий список, когда вы просматриваете его на мобильном телефоне.

Я хочу добавить отступ для дочерних элементов, например,

  • Элемент списка 1
  • - дочерний элемент 1
  • ---- дочерний элемент дочернего элемента 1
  • - дочерний элемент 2
  • элемент списка 2

Вместо того, чтобы перечислять в одну строку.

Я рад просто добавить nbsp, чтобы упростить задачу - или добавить классы и CSS, если это более удобно.

код, который я сейчас использую для генерации выбора: 

$("<select />").appendTo("#primary-nav");

  $("<option />", {
     "selected": "selected",
     "value"   : "",
     "text"    : "Go to..."
  }).appendTo("#primary-nav select");

  $("#primary-nav a").each(function() {
   var el = $(this);
   $("<option />", {
       "value"   : el.attr("href"),
       "text"    : el.text()
   }).appendTo("#primary-nav select");
  });

  $("#primary-nav select").change(function() {
    window.location = $(this).find("option:selected").val();
  });

Меню, из которого оно генерируется, построено так: 

<ul>
  <li><a>Item 1</a>
      <ul>
          <li><a>Child Item 1</a>
              <ul>
                  <li><a>Child Item 1</a></li>
              </ul>
          </li>
          <li><a>Child Item 2</a></li>
      </ul>
  </li>
  <li><a>Item 2</a></li>
</ul>

Вот скрипка с примером: http://jsfiddle.net/C5S32/

Ответы [ 4 ]

3 голосов
/ 20 февраля 2012

Это должно делать то, что вы хотите, и это довольно настраиваемо.http://jsfiddle.net/C5S32/7/

var options = '<option selected>Go to...</option>';
$('#primary-nav').find('a').each(function () {
    var text = $(this).text(),
        depth = $(this).parent().parents('ul').length,
        depthChar = '',
        i = 1;
    for (i; i < depth; i++) { depthChar += '&ndash;&nbsp;'; }
    options += '<option>' + depthChar + text + '</option>';
});
$('<select />').append(options).appendTo('#primary-nav');

Как примечание: в коде вы добавляете много раз.Лучше всего добавить все за один вызов, чтобы избежать чрезмерного переворачивания.

1 голос
/ 20 февраля 2012

Это должно сделать это, Не уверен насчет поддержки «margin-left» на мобильных телефонах, но укажет вам правильное направление.

http://jsfiddle.net/C5S32/2/

РЕДАКТИРОВАТЬ: Кажется, только Firefox позволяетнаценка на опционные элементы,

http://jsfiddle.net/C5S32/6/

0 голосов
/ 30 мая 2013

Лучшее решение, которое я обнаружил, добавляет дочерние метки "-" автоматически. Убедитесь, что вы изменили верхний ".navbar .nav" на свой собственный класс div или идентификатор, который установлен на исходном ul.

http://snipplr.com/view/66721/

0 голосов
/ 20 февраля 2012

Посмотрите, соответствует ли это вашим потребностям:

http://jsfiddle.net/C5S32/1/

Я только что добавил: 

li {
    padding-left: 1em;
}​
...