Как я могу расположить некоторые элементы div в неупорядоченном списке, чтобы они соответствовали корневому элементу списка? - PullRequest
Новая
       9

Как я могу расположить некоторые элементы div в неупорядоченном списке, чтобы они соответствовали корневому элементу списка?

2 голосов
/ 02 апреля 2010

Я хочу расположить все элементы div так, чтобы они были влево по одной и той же координате x, чтобы они выглядели хорошо.

Обратите внимание на рисунок ниже, показывающий, как в зависимости от количества вложенных категорий div (и его содержимое) отображаются в несколько разных координатах x. Мне нужно, чтобы линия div была точно такой же координатой x, независимо от того, насколько глубоко она вложена. Обратите внимание, что в самой нижней категории всегда есть div для содержимого, но этот div должен находиться внутри последнего

.

Я использую неупорядоченный список для отображения меню и подумал, что лучшим решением было бы захватить корневую категорию (Cat 2 и mCat1) и получить их левое смещение с помощью jquery, а затем просто использовать это значение для обновления позиционирования Div ... но я не мог заставить его работать правильно. Буду признателен за любые советы или помощь, которые вы готовы оказать.

Вот HTML 

<ul id="nav>
  <li>Cat 2
     <ul>
        <li>sub cat2</li>
     </ul>
  </li>
  <li>mCat1
      <ul>
         <li>Subcat A
            <ul>
               <li>Subcat A.1
                  <ul>
                     <li>Annie</li>
                  </ul>
               </li>
            </ul>
          </li>
        </ul>
   </li>
 </ul>

Вот некоторые jquery, которые я пытался (я вставил div внутри этого цикла .each (), чтобы получить некоторые значения, но в основном этот селектор захватывает последний

в дереве меню и помещает div после это и есть тот div, который я хочу позиционировать. Значение 245 было тем, с чем я играл, чтобы увидеть, как можно выстроить вещи в ряд, и я знаю, что это не в порядке, но проблема все та же, неважно что я делаю: 
$("#nav li:not(:has(li))").each(function () {
                var self = $(this);
                self.after( '<div id="' + self.attr('p_node') + '_p_cont_div" class="property_position" style="display:none;" /> ' );
        });

        //ROOT - Retrieve the position of the root element in order to place the div in the right spot
        var p = $("#nav li:first");
        var position = p.offset();
        var xbaseLeft = Math.round(position.left);
        $("#nav li:not(:has(li))>div").css('left', xbaseLeft);

Вот ксс: 

.property_position{
float:left;
position: relative;
top: 0px;
padding-top:5px;
padding-bottom:10px;
  }

/*  MENU NAVIGATION (<UL><LI> LISTS
****************************************/
ul#nav{
/* This handles the main root <ul> */
margin-left:0;
padding-left:0px;
text-indent:15px;   
}
ul#nav div{
  overflow: hidden;
}

#nav li>a:hover { 
    cursor: pointer;
}
#nav ul { 
/* This handles any nested <ul>'s inside an id of "#nav" */
display:none; 
margin-left:0px; 
padding-left:15px;
text-indent:15px;

margin:0px;
}
#nav li {
list-style-type:none;
vertical-align: top;
list-style-image: none;
left:0px;
text-align:left;
clear: both;

margin:0px;
}

альтернативный текст http://www.redsandstech.com/Untitled2.jpg

Ответы [ 3 ]

3 голосов
/ 02 апреля 2010

Для этого вам не понадобится JavaScript / jQuery. CSS очень способен сам по себе. Однако размещенный вами CSS не будет влиять на ваш HTML, пока (и если) не будет выполнен jQuery (который не должен быть необходим).

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

ul, li
{
    margin: 0;
    padding: 0;
}

Если это не сработает, у вас может возникнуть проблема с тем, что эти объявления CSS переопределяются другими, более конкретными, поэтому вам нужно будет сделать эти селекторы более конкретными. Если вы разместите ссылку на страницу, мы сможем помочь вам определить, что происходит, и подскажем, как это исправить.

1 голос
/ 02 апреля 2010

В качестве рекомендации, которая может быть далека, потому что немного сложно понять, чего именно вам нужно достичь, вам может быть лучше, если вы добавите div в выбранный элемент списка и позволите странице естественным образом сделать отступ для элементов для тебя. Попытка угадать или определить левую позицию каждого из этих элементов может привести к большой сумке боли. Приведенный ниже код демонстрирует естественное поведение отступа элементов списка. 

<html>
<head>
    <title></title>
</head>
<body>
<ul id="nav"><li>Cat 2
 <ul>
    <li>sub cat2</li>
 </ul></li><li>mCat1 <div style="width:100px;height:50px;background:#ccc;"></div>
  <ul>
     <li>Subcat A <div style="width:100px;height:50px;background:#ccc;"></div>
        <ul>
           <li>Subcat A.1 <div style="width:100px;height:50px;background:#ccc;"></div>
              <ul>
                 <li>Annie</li>
              </ul>
           </li>
        </ul>
      </li>
    </ul>

Надеюсь, я правильно понял вопрос:)

0 голосов
/ 03 апреля 2010

Ну, для тех, кто приходит и не может найти ответ через простой CSS, я, кажется, нашел и ответил. Я смог сделать это с помощью хорошей математики и JavaScript, конечно же, с помощью jqueries.

Вот что я сделал:

  1. назначить атрибут "level" вашему неупорядоченному списку:
    • и т. Д.
    • назначить событие щелчка для самого нижнего узла в списке. В моем случае я решил привязать это к тому, что является ребенком до последнего
    • Получить левую координату (.offset (). Left) самой верхней (корень)
    • Назначьте базовое левое поле для корневых элементов (тех, у которых нет дочерних элементов), что в моей презентации мне потребовалось 10 пикселей слева, что выровняло бы поля, начиная с левого края точно под значком папки.
    • Переберите уровни для вложенных
    • и сделайте небольшую математическую операцию, чтобы выяснить, как далеко от BASE корневого элемента вы находились. В моем случае CSS для li использовал отступ в 15px, поэтому мне нужно было вычесть в 15 раз для каждого уровня, чтобы он соответствовал пунктам меню, у которых не было дочерних элементов. Например, если у вас есть элемент уровня 3, мне нужно вычесть 10-45 = -35, таким образом, мой левый край должен быть "-35px", чтобы он соответствовал корневому элементу, если его вложенность уровня 1, для левого края это будет 10-15 = -5px.
    • Добавить новую позицию пикселя в CSS для выбранного элемента; в моем случае я помещаю это в div, которому я ранее назначил идентификатор, который я мог легко выбрать.
    • Сядь и улыбнись, потому что эта чертовщина наконец сработала.
    • Попытайтесь поделиться своим волнением с женой и детьми ..... тогда улыбка исчезнет, ​​когда вы вспомните, что они все равно не имеют ни малейшего представления о том, что вы делаете ... и они говорят ... "э-э, наверное крутой папа ... у тебя есть несколько коробок, чтобы выстроиться в очередь ... ну, я должен тебя поздравить? Когда ты собираешься сделать что-нибудь классное, например, xBox или игру для Wii! ". Данг 7 лет!

Вот код, который добился цели: 

$('#nav li:not(:has(li))>a').toggle(function() { //1st click
     //show div and content

var parent_offset = $(this).parents("li:last");
var level = $(this).parent().attr('level'); //Retrieve the level for the li of the clicked anchor
var position = parent_offset.offset(); //Obtain the left coordinate of the root li in the <ul> for the clicked anchor
var xBase=10, xbaseLeft;
if(level == 0) // Root node and is the base left position we want to establish, which is 10px
{
    xbaseLeft = xBase;
}
else // Subtract 15px based on how deep the nested anchor is. keep adding 15 for multiple levels deep in order to line up the box with the root boxes
{
    var xPx=0, aa=1, xPs;
    for(aa; aa<=level; aa++)
    {
        xPx += 15; //Add 15 to represent the pixel indentation fromt the css for the ul and li's
        console.log("xPx", xPx);
    }
    xbaseLeft = (xBase-xPx) + "px";
}

var p_id = $(this).parent().attr('p_node');
var p_name =  p_id + '_p_cont_div';

$("#"+p_name+"").css("left", xbaseLeft);

}, function() { //2nd click
    //Hide div and content

}); //END TOGGLE
...