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

您可以改变方法来使用文档片段样式创建和an object to populate the properties on the elements，如下所示：

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一个类）也会起作用，你也不会t需要一个传递了滑块参数的函数。

使用.append构建复杂的菜单

1 个答案: