избежать коллапса дерева при щелчке текста в дереве

Question

Мне нужно избегать коллапса jquery treeview при нажатии на ссылки / текст в виде дерева.

Например, если я показываю список directories/subdirectories в виде дерева, мне нужно свернуть дерево только при нажатии +/- image, а не при нажатии directories

Answer 1

Вам необходимо обновить сам код javascript в виде дерева. Для Treeview 1.4 закомментируйте следующие строки (66-68):

this.filter(":has(>ul):not(:has(>a))").find(">span").click(function(event) {
    toggler.apply($(this).next());
}).add( $("a", this) ).hoverClass();

Это обеспечит развертывание / свертывание только при нажатии +/-. Функция развернуть все и свернуть все также будет работать, если применимо.

Еще лучше, вы предоставляете новый аргумент при определении дерева, и только если условие выполнено, вы переопределяете функциональность по умолчанию. Например,

if (settings.expandMode != 'simple'){
    this.filter(":has(>ul):not(:has(>a))").find(">span").click(function(event) {
        toggler.apply($(this).next());
    }).add( $("a", this) ).hoverClass();
}

И определение вашего дерева может выглядеть так:

$("#tree").treeview({
    animated: "fast",
    persist: "cookie",
    collapsed: true,
    control: "#treecontrol",
    expandMode: "simple" // custom - only toggles per the +/- icon      
})

Надеюсь, вы поняли идею. Удачи.

Answer 2

Свяжите событие клика с изображением +/-, а не с контейнером, содержащим изображение и текст каталога.

Так что, если ваш HTML выглядит так:

<ul class="dir-list">
    <li>
        <div><img class="expand" src="expand.gif" /><span>Directory Name</span></div>
        <ul>
            <li><div><img class="expand" src="expand.gif" /><span>Sub Directory Name</span></div></li>
        </ul>
    </li>
</ul>

Вы бы привязали свой клик к изображению, выполнив:

$('.dir-list img.expand').click(function(){
    //Do stuff here to expand or collapse the area
});