Как сделать ссылку на родительский узел активным в виде дерева?

Question

Я хочу сделать ссылку на родительский узел активным в виде дерева. До сих пор я это делаю:

<li><a href="beranda">A - Referensi Spasial</a> <!--this is parent node--> 
    <ul> 
     <li>Jaring Kerangka Referensi Geodesi</li> 
     <li>Model Geoid 
      <ul> 
       <li><a href="kugi/detail_data_kugi">AB01010010</a></li> 
       <li>AB01010020</li> 
      </ul> 
     </li> 
     <li>Stasiun Pasang Surut</li> 
    </ul> 
</li> 

Когда я нажимаю на родительский узел, он просто расширяет дочерние узлы. То, что я хочу, когда я нажимаю, он открыть ссылку я поставил на <a></a>

Вот мой снимок экрана с моей точки зрения дерева:

И это Java-код:

$.fn.extend({ 
     treed: function (o) { 

     var openedClass = 'glyphicon-minus-sign'; 
     var closedClass = 'glyphicon-plus-sign'; 

     if (typeof o != 'undefined'){ 
      if (typeof o.openedClass != 'undefined'){ 
       openedClass = o.openedClass; 
      } 
      if (typeof o.closedClass != 'undefined'){ 
       closedClass = o.closedClass; 
      } 
     }; 

     //initialize each of the top levels 
     var tree = $(this); 
     tree.addClass("tree"); 
     tree.find('li').has("ul").each(function() { 
      var branch = $(this); //li with children ul 
      branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>"); 
      branch.addClass('branch'); 
      branch.on('click', function (e) { 
       if (this == e.target) { 
        var icon = $(this).children('i:first'); 
        icon.toggleClass(openedClass + " " + closedClass); 
        $(this).children().children().toggle(); 
       } 
      }) 
      branch.children().children().toggle(); 
     }); 
     //fire event from the dynamically added icon 
     tree.find('.branch .indicator').each(function(){ 
      $(this).on('click', function() { 
       $(this).closest('li').click(); 
      }); 
     }); 
     //fire event to open branch if the li contains an anchor instead of text 
     tree.find('.branch>a').each(function() { 
      $(this).on('click', function (e) { 
       $(this).closest('li').click(); 
       e.preventDefault(); 
      }); 
     }); 
     //fire event to open branch if the li contains a button instead of text 
     tree.find('.branch>button').each(function() { 
      $(this).on('click', function (e) { 
       $(this).closest('li').click(); 
       e.preventDefault(); 
      }); 
     }); 
     } 
    }); 

    //Initialization of treeviews 
    $('#tree1').treed(); 

Итак, как я могу это сделать? Может кто-нибудь мне помочь? Спасибо

Answer 1

Если мое понимание верное, вы спрашиваете, почему ваши ссылки, похоже, не имеют никакого эффекта, и нажатие на них просто расширяет дерево, как если бы это был обычный текст?

Мне кажется, что это просто из-за кода, который прикрепляет события к этим ссылкам, т. Е. Блок ниже комментария «событие пожара, чтобы открыть ветвь, если li содержит якорь вместо текста».

Инструкция $(this).closest('li').click(); генерирует новое событие click на родительском элементе "li".

Инструкция e.preventDefault(); запрещает связи получать событие «щелчок», поэтому оно не перенаправляет страницу/прокрутку на якорь.

Таким образом, результат такой, как если бы «щелчок» «подскочил» к вашей ссылке и передан родительскому «li», поэтому не перенаправляется, а расширяет дерево.

Вы можете просто удалить этот блок, чтобы восстановить нормальное поведение ссылок. Тем не менее, событие «щелчок» по-прежнему пузырится на родительский элемент «li» и расширяет дерево. Не проблема, если страницы перенаправлены, но заметно, если ссылка идет на локальный привязку (та же страница).

Для предотвращения этого (но все же пусть ссылка выполняет нормальную работу), сохраните блок, но замените 2 внутренних инструкции на e.stopPropagation();. Напротив preventDefault() он позволяет текущему событию, но он останавливает пузырь событий (родительские элементы его не получают).

Теперь я не уверен в причине этого блока. Похоже, что он больше предназначен для якорей (которые используют один и тот же тег «a», но с атрибутом «name» вместо «href»). Но не было бы причин помешать событию «щелчок» на якоре?