Вопрос по jQuery mtree.js + bootstrap

Здравия.
Использую библиотеку mtree.js, но не получается добавить к ней элементы из бутстрапа.
Имею следующий код:
<ul class="mtree">
  <li><a href='#'>01.ДСП --891</a>
    <ul>
      <li><a href='#'>1.1 ДСП Ивацевичи (Белоруссия)</a>
        <ul>
          <li><a href='#'>1.1.1 ДСП 2750*1830*10мм Белорусь</a></li>
          <li><a href='#'>1.1.2 ДСП 2750*1830*16мм Белорусь</a></li>
          <li><a href='#'>1.1.3 ДСП 2750*1830*18мм Белорусь</a></li>
          <li><a href='#'>1.1.4 ДСП 2800*2070*16мм Белорусь</a></li>
        </ul>
      </li>
      <li><a href='#'>1.2 ДСП LAMARTY</a>
        <ul>
          <li><a href='#'>1.2.1 ДСП LAMARTY 10мм</a></li>
          <li><a href='#'>1.2.2 ДСП LAMARTY 16мм</a></li>
        </ul>
      </li>
      <li><a href='#'>1.3 ДСП РУССКИЙ ЛАМИНАТ </a></li>
      <li><a href='#'>1.4 ДСП WBM РАСПРОДАЖА </a>
        <ul>
          <li><a href='#'>1.4.1 ДСП 2750*1830*10мм </a></li>
          <li><a href='#'>1.4.2 ДСП 2750*1830*18мм </a></li>
          <li><a href='#'>1.4.3 ДСП 2750*1830*16мм </a></li>
        </ul>
      </li>
      <li><a href='#'>1.5 ДСП КРОНОСПАН РАСПРОДАЖА </a>
        <ul>
          <li><a href='#'>1.5.1 ДСП 2750*1830*10мм Кроноспан </a></li>
          <li><a href='#'>1.5.2 ДСП 2750*1830*16мм Кроноспан </a></li>
        </ul>
      </li>
      <li><a href='#'>1.6 ДСП КРОНОУКРАИНА,КРОНОСТАР </a></li>
      <li><a href='#'>1.7 ДСП EGGER </a></li>
      <li><a href='#'>1.8 ДСП CLEAF </a></li>
      <li><a href='#'>УЦЕНКА </a></li>
    </ul>
  </li>
  <li><a href='#'>02 ДВП,МДФ,ФАНЕРА --941</a>
    <ul>
      <li><a href='#'>2.1 ДВП </a></li>
      <li><a href='#'>2.2 ФАНЕРА </a></li>
      <li><a href='#'>2.3 МДФ </a></li>
    </ul>
  </li>
  <li><a href='#'>03 ПАНЕЛИ,РАТАНГ,СОФТЫ --959</a>
    <ul>
      <li><a href='#'>3.1 ПАНЕЛИ НЕВСКИЙ ЛАМИНАТ</a></li>
      <li><a href='#'>3.2 ПАНЕЛИ АЛЬБИКО </a></li>
      <li><a href='#'>3.3 ПАНЕЛИ HiGloss </a></li>
      <li><a href='#'>3.4 ПАНЕЛИ МДФ AKROPA </a></li>
      <li><a href='#'>3.5 РАТАНГ, БАМБУК </a></li>
      <li><a href='#'>3.6 СОФТЫ </a></li>
    </ul>
  </li>
  <li><a href='#'>04 СТОЛЕШНИЦЫ --946</a>
    <ul>
      <li><a href='#'>4.1 СТОЛЕШНИЦЫ СКИФ </a>
        <ul>
          <li><a href='#'>4.1.01 СТОЛЕШНИЦЫ СКИФ 26мм МАТОВЫЕ </a></li>
          <li><a href='#'>4.1.02 СТОЛЕШНИЦЫ СКИФ 26мм ГЛЯНЕЦ </a></li>
          <li><a href='#'>4.1.03 СТОЛЕШНИЦЫ СКИФ 38мм МАТОВАЯ </a></li>
          <li><a href='#'>4.1.04 СТОЛЕШНИЦЫ СКИФ 38мм ГЛЯНЕЦ </a></li>
          <li><a href='#'>4.1.05 СТОЛЕШНИЦЫ 1200*3000*26мм </a></li>
          <li><a href='#'>4.1.06 СТОЛЕШНИЦЫ 1200*3000*38мм </a></li>
          <li><a href='#'>4.1.07 Мебельный ЩИТ СКИФ МАТОВЫЙ </a></li>
          <li><a href='#'>4.1.08 Мебельный ЩИТ СКИФ ГЛЯНЕЦ </a></li>
          <li><a href='#'>4.1.09 ПОСТФОРМИНГ 600 мм СКИФ </a></li>
          <li><a href='#'>4.1.10 ПОСТФОРМИНГ 800 мм СКИФ </a></li>
          <li><a href='#'>4.1.11 ПОСТФОРМИНГ 1200 мм СКИФ </a></li>
          <li><a href='#'>4.1.12 УГЛОВОЙ СЕГМЕНТ СКИФ </a></li>
          <li><a href='#'>4.1.13 Планки дстолешниц, плинтус СКИФ </a></li>
          <li><a href='#'>4.1.14 КРОМКА СКИФ </a></li>
          <li><a href='#'>4.1.15 СТОЛЕШНИЦЫ СКИФ 60мм МАТОВАЯ </a></li>
        </ul>
      </li>
      <li><a href='#'>4.2 СТОЛЕШНИЦЫ WILSONART </a></li>
      <li><a href='#'>4.3 СТОЛЕШНИЦЫ ТРОЯ </a>
        <ul>
          <li><a href='#'>4.3.1 СТОЛЕШНИЦЫ ТРОЯ 26мм </a></li>
          <li><a href='#'>4.3.2 СТОЛЕШНИЦЫ ТРОЯ 38мм </a></li>
          <li><a href='#'>4.3.3 ПАНЕЛЬ ТРОЯ 6мм </a></li>
          <li><a href='#'>4.3.4 УГЛОВОЙ СЕГМЕНТ ТРОЯ </a></li>
          <li><a href='#'>4.3.5 КРОМКА ТРОЯ </a></li>
        </ul>
      </li>
      <li><a href='#'>4.4 СТОЛЕШНИЦЫ СЛОПЛАСТ, FORMICA </a></li>
      <li><a href='#'>4.5 СТОЛЕШНИЦЫ ARPA </a>
        <ul>
          <li><a href='#'>4.5.1 Столешницы,кромка АРПА СКЛАД </a></li>
          <li><a href='#'>4.5.2 Столешницы,кромка АРПА ЗАКАЗ </a></li>
        </ul>
      </li>
      <li><a href='#'>4.6 СТОЛЕШНИЦЫ СЛОТЕКС </a></li>
      <li><a href='#'>4.7 СТОЛЕШНИЦЫ НЕСТАНДАРТ </a></li>
      <li><a href='#'>4.8 СТОЛЕШНИЦЫ РАСПРОДАЖА </a></li>
    </ul>
  </li>
</ul>
очень хочется сделать, чтобы при нажатии на элемент последнего уровня, например на:
<li>
  <a href='#'>1.1.4 ДСП 2800*2070*16мм Белорусь </a>
</li>

открывался скрытый блок div (style=«dispaly:none»). Пробовал вешать скрипт на onclick, который меняет это свойство у дива, но не выходит. Может кто-нибудь подскажет? Если нужна оплата, скажите.
Заранее спасибо.


   Вопросы 0    145 0

Комментарии (2)

  1. Александр Мальцев # 0
    Здравствуйте, Павел.
    Компоненты Bootstrap у Вас не добавляются наверно из-за использования стилей Foundation (foundation.css). Просто не используйте его.
    Что-бы после этого поправить стили этого меню, добавьте в файл CSS следующие строки:
    ul.mtree {
      font-size: 16px;
    }
    ul.mtree ul,li {
      margin: 0px;
      padding: 0px;
    }
    ul.mtree a:focus, a:hover {
      text-decoration: none;
    }
    
    Чтобы показывался некоторый блок достаточно написать скрипт:
    <!-- Некоторый блок -->
    <div id="myID" class="alert alert-danger" style="display:none">...</div>
    ...
    <script>
    jQuery( "ul.mtree li:last-of-type" ).filter("li :not(ul)").find('a').click(function() {
      jQuery('#myID').show();
    });
    </script>
    
    Материальная помощь не помешает. Это можно сделать на странице Помощь сайту. Можешь перевести ту сумму, которую посчитаешь нужной.
    1. Павел # 0
      к сожалению ваш код не работает
      пришлось вымучить самому
      <script type="text/javascript">
                  
                  function showHide(element_id) {
                      if (document.getElementById(element_id)) { 
                          var obj = document.getElementById(element_id); 
                          if (obj.style.display != "block") { 
                              obj.style.display = "block"; //Показываем элемент
                          }
                          else obj.style.display = "none"; //Скрываем элемент
                      }
                  }   
              </script>
      вызываем через onclick c передачей параметров
      пример
      <a onclick="showHide('10635')" href="javascript:void(0)">Угол 135 хром </a>
      <div id="10635" class="alert alert-danger" style="display: none;">
      <a onclick="showHide('10635')" href="javascript:void(0)">Закрыть</a>
      </div>

      Вы должны авторизоваться, чтобы оставлять комментарии.