Не могли бы вы рассказать мне, как динамически добавлять данные? Я не могу сделать то же самое, что и статический.
http://jsfiddle.net/eHded/1537/
Проверьте эту скрипту и откройте панель меню, а также параметры подменю.
Теперь мне нужно сделать то же самое при нажатии кнопки. У меня есть кнопка. Я хочу добавить пункт меню (который является подменю Additem в панели), мы можем это сделать.
Я получаю событие нажатия кнопки, но это не работает нормально.
http://jsfiddle.net/eHded/1538/
$('#add').click(function(){
// alert('e')
$('#tree li').append('<ul><li> <span>jjjj</span><ul>')
var tree = $('#tree').goodtree({'setFocus': $('.focus')});
})
Вы не закрыли <ul>
и <li>
.
Кроме того, вы, вероятно, не хотите добавлять новый элемент в каждый <li>
в дереве.
Попробуйте вместо этого (http://jsfiddle.net/eHded/1541/):
$(function() {
var tree = $('#tree').goodtree({
'setFocus': $('.focus')
});
$('.slider-arrow').click(function() {
var anchor = this;
var removeClass = "show";
var addClass = "hide";
var diff = "+=300";
var arrows = "«";
if ($(anchor).hasClass("hide")) {
diff = "-=300";
removeClass = "hide";
addClass = "show";
arrows = "»";
}
$(".slider-arrow, .panel").animate({
left: diff
}, 700, function() {
// Animation complete.
$(anchor).html(arrows).removeClass(removeClass).addClass(addClass);
});
});
$('#add').click(function() {
$('#tree').children().last().append('<ul><li><span>jjjj</span></li></ul>');
$('.goodtree_toggle').off();
$('#tree').goodtree({
'setFocus': $('.focus')
});
})
});
Также существует проблема с плагином goodtree
вы используете. Элементы расширяются каждый раз, когда вы нажимаете на них.
В идеале плагин будет использовать делегирование делегирования, чтобы убедиться, что расширение все еще работает, даже если вы меняете дерево, без необходимости повторной инициализации. Поскольку вы повторно инициализируете дерево после каждой вставки, к ним привязаны несколько обработчиков событий. Поэтому, когда вы вставили нечетное число узлов, он будет переключать элемент четными (поскольку вы инициализировали его в самом начале, когда он был пуст), не давая вам результата. Вы можете исправить это, удалив все обработчики событий при переключении перед повторной инициализацией:
$('.goodtree_toggle').off();
Я бы действительно искал лучший плагин.
Попробуйте это вместо этого:
$('#add').click(function(){
var data = $('#tree li').html();
$('#tree li').html(data+'<ul><li> <span>jjjj</span><ul>')
var tree = $('#tree').goodtree({'setFocus': $('.focus')});
});