используя .append для построения сложного меню

Question

Для создания блока меню, который должен переключаться с помощью скрытия / отображения элементов меню, я использую .append html. Идея кода заключается в следующем:

     navigat += '<h3 class="infoH3"> <a id="' + menuID +'"'
                     + ' href="javascript:slideMenu(\'' + menuSlider + '\');">'
                     +  menuName + '</a></h3>';

     navigat += '<div id="' + menuSlider + '" style="display:none">';
     navigat += '    <ul>';
     navigat += '       <li>aMenu1</li>'
     navigat += '       <li>aMenu2</li>'
     navigat += '       <li>aMenu3</li>'
     navigat += '    </ul>';
     navigat += '<!-- menuName Slider --></div>';
     $("#someElement").append (navigat);

Это хорошо .. пока.

Но дело в том: Я использую JS для чтения требуемых пунктов меню (например, «aMenu1» вместе с заголовком и / или информацией о ссылке) из файла, чтобы построить все это, например. для 'aMenu1' составляется комплекс, и $ ("# someElement"). append (someString) используется для добавления этого 'someElement'.

В данный момент я строю эти HTML-элементы построчно. Также хорошо .. поскольку полученная строка имеет открывающий и закрывающий тег, например. "<li>aMenu2</li>".

Как видно из приведенного выше кода есть строка "<div id="' + menuSlider + '" style="display:none">". Добавляя, что - AFAIS - .append автоматически (????) добавляет «</div>», который закрывает оператор. Это ломает мое представление о всей концепции! Часть меню не включена в 'menuSlider'.

QQ: Как его изменить - НЕ добавлять к нему "</div" ??

Гюнтер

Answer 1

Вы можете изменить свой метод, чтобы использовать создание стиля фрагмента документа и объект для заполнения свойств элементов , например:

var someElement = $("#someElement");
$('<h3 class="infoH3"></h3>').append($('<a />', 
     { 'id': menuID,
       'href': '#',
       click: function() { slideMenu(menuSlider); }
     })
 ).appendTo(someElement);

var div = $('<div />', { 'id': menuSlider, css: {display: 'none'} });
$('<ul />').append('<li>aMenu1</li>')
           .append('<li>aMenu2</li>')
           .append('<li>aMenu3</li>')
           .appendTo(div);
div.appendTo(someElement);

Это совсем другой способ, сначала мы кешируем объект $("#someElement"), поэтому мы не ищем его повторно. Затем мы создаем <h3> как объект, помещаем ссылку внутрь, затем вставляем и добавляем все это к someElement. В последнем, тот же самый подход, он создает <div>, устанавливает его свойства, затем создает меню <ul> и добавляет его внутрь ... затем добавляет весь этот div к someElement.

В качестве примечания, я не уверен, как работает .slideMenu(), но обработчик событий, который работает через $(this).parent().next() (или дает классу div), также будет работать, и вам не понадобится функция с переданным аргументом слайдера.