Выпадающее меню Bootstrap в Joomla 3.1

Question

Я работаю над тем, чтобы меню Bootstrap работало с выпадающими списками, как это должно быть в Joomla 3.1. Я почти там, но не совсем: для сценария JS я использую (How to make twitter bootstrap menu dropdown on hover rather than click)

<script type="text/javascript"> 
    (function($){ 
    $(document).ready(function(){ 
    $('.dropdown-toggle').dropdown(); 
     // dropdown 
     $('.parent').addClass('dropdown'); 
     $('.parent > a').addClass('dropdown-toggle'); 
     $('.parent > a').attr('data-toggle', 'dropdown'); 
    $('.parent > a').attr('data-target', '#'); 
     $('.parent > a').append('<b class="caret"></b>'); 
     $('.parent > ul').addClass('dropdown-menu'); 
    $('.nav-child .parent').removeClass('dropdown'); 
    $('.nav-child .parent .caret').css('display', 'none'); 
     $('.nav-child .parent').addClass('dropdown-submenu'); 
    }); 
    })(jQuery); 
</script> 

устанавливаемых сотовую I нами (http://forum.joomla.org/viewtopic.php?f=706&t=770153)

.dropdown-menu .sub-menu { 
    left: 100%; 
    position: absolute; 
    top: 0; 
    visibility: hidden; 
    margin-top: -1px; 
} 

.dropdown-menu li:hover .sub-menu { 
    visibility: visible; 
} 

.dropdown:hover .dropdown-menu { 
    display: block; 
} 

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu { 
    margin-top: 0; 
} 

.navbar .sub-menu:before { 
    border-bottom: 7px solid transparent; 
    border-left: none; 
    border-right: 7px solid rgba(0, 0, 0, 0.2); 
    border-top: 7px solid transparent; 
    left: -7px; 
    top: 10px; 
} 
.navbar .sub-menu:after { 
    border-top: 6px solid transparent; 
    border-left: none; 
    border-right: 6px solid #fff; 
    border-bottom: 6px solid transparent; 
    left: 10px; 
    top: 11px; 
    left: -6px; 
} 

Это работает отлично, с одной стороны, чтобы исправить: ссылка в строке меню работает только для отображения меню под ним. То, что мне нужно, это заставить рабочую работу работать. Как я могу это сделать?

Answer 1

К сожалению, поскольку для отображения раскрывающегося списка ниже вы должны «НАЖМИТЕ», чтобы отобразить раскрывающееся меню ниже, у вас не может быть Ссылка на этот элемент, он должен меня установить на href = "#", иначе каждый раз, когда он был нажат, перезагрузите страницу и, таким образом, не отобразите раскрывающийся список. Если ваша установка на самом деле работает, что меню будет отображаться, когда «завис» и не требует, щелчка затем просто удалить

$('.parent > a').attr('data-target', '#'); 

из ваших JavaScript, и это будет оставить ссылку неповрежденные по пункту меню (при условии, что вы правильно установить пункты меню типа правильно.

Надеется, что это помогает

Out полноты я использую следующий на Joomla 3,2

jQuery(document).ready(function(){ 

     // dropdown 

     jQuery('.parent').addClass('dropdown'); 
     jQuery('.parent > a').addClass('dropdown-toggle'); 
     jQuery('.parent > a').attr('data-toggle', 'dropdown'); 
     jQuery('.nav > .parent > a').attr('href','#'); 
     jQuery('.parent > a').append('<span class="caret"></span>'); 
     jQuery('.parent > ul').addClass('dropdown-menu'); 
     jQuery('.nav-child .parent').removeClass('dropdown'); 
     jQuery('.nav-child .parent').addClass('dropdown-submenu'); 
     jQuery('.dropdown-submenu > a').removeAttr('class'); 
     jQuery('.dropdown-submenu > a').removeAttr('data-toggle', 'dropdown'); 
     jQuery('.dropdown-submenu > a > span').remove(); 
    }); 

Мне не нужно настраивать мой css, за исключением изменения цветов, это css в моем шаблоне template.css, который ссылается на макет панели навигации, большинство из которых просто настраивает визуальную информацию, которая не влияет на выпадающие меню. /* Настройка NavBar ссылки будет заполнить все пространство .navbar */

.navbar .navbar-inner { 
    padding: 0; 
    font: Arial; 
} 
/* .navbar .nav { 
     margin: 0; 
     display: table; 
     width: 100%;*/ 
} 
.navbar .nav li { 
    display: table-cell; 
    width: 1%;/*  float: none;*/ 
} 
.navbar .nav li a { 
    text-align: center; 
    border-left: 1px solid rgba(255,255,255,.75); 
    border-right: 1px solid rgba(0,0,0,.1); 
} 
.navbar .nav li:first-child a { 
    border-left: 0; 
    border-radius: 3px 0 0 3px; 
} 
.navbar .nav li:last-child a { 
    border-right: 0; 
    border-radius: 0 3px 3px 0; 
} 

Лев