2013-05-24 5 views
5

Sto usando il tema wordpress-bootstrap per creare un menu con menu a discesa, tuttavia il link di livello superiore rivela solo il menu a discesa su & non va a una pagina stessa quando si fa clic. Quindi, su www.thermoryuk.co.uk/wp/ quando faccio clic su "Flooring", voglio andare alla pagina del pavimento e rivelare il menu a discesa. codice qui sotto, grazie in anticipobootstrap menu a discesa livello superiore navigazione fai un link cliccabile

<nav class="subnav clearfix"> 
    <ul id="menu-product-menu" class="nav nav-pills pull-right"> 
    <li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87 dropdown" data-dropdown="dropdown"> 
     <a href="http://www.thermoryuk.co.uk/wp/?page_id=31" class="dropdown-toggle" data-toggle="dropdown"> 
     Flooring <b class="caret"></b> 
     </a> 
     <ul class="dropdown-menu"> 
     <li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88 dropdown-submenu" data-dropdown="dropdown"> 
      <a href="http://www.thermoryuk.co.uk/wp/?page_id=32" class="dropdown-toggle" data-toggle="dropdown">Ash Flooring</a> 

      <ul class="dropdown-menu"> 
      <li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"> 
       <a href="http://www.thermoryuk.co.uk/wp/?page_id=60">Ash Flooring Gallery</a> 
      </li> 
      </ul> 
     </li> 
     <li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"> 
      <a href="http://www.thermoryuk.co.uk/wp/?page_id=34">Spruce Flooring</a> 
     </li> 
     <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90"> 
      <a href="http://www.thermoryuk.co.uk/wp/?page_id=36">Birch Flooring</a> 
     </li> 
     <li id="menu-item-91" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91"> 
      <a href="http://www.thermoryuk.co.uk/wp/?page_id=38">Pecan Flooring</a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</nav> 
/* ============================================================ 
    * bootstrap-dropdown.js v2.2.2 
    * http://twitter.github.com/bootstrap/javascript.html#dropdowns 
    * ============================================================ 
    * Copyright 2012 Twitter, Inc. 
    * 
    * Licensed under the Apache License, Version 2.0 (the "License"); 
    * you may not use this file except in compliance with the License. 
    * You may obtain a copy of the License at 
    * 
    * http://www.apache.org/licenses/LICENSE-2.0 
    * 
    * Unless required by applicable law or agreed to in writing, software 
    * distributed under the License is distributed on an "AS IS" BASIS, 
    * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
    * See the License for the specific language governing permissions and 
    * limitations under the License. 
    * ============================================================ */ 
!function ($) { 
    "use strict"; // jshint ;_; 
    /* DROPDOWN CLASS DEFINITION 
     * ========================= */ 
    var toggle = '[data-toggle=dropdown]' 
    , Dropdown = function (element) { 
    var $el = $(element).on('click.dropdown.data-api', this.toggle) 
    $('html').on('click.dropdown.data-api', function() { 
     $el.parent().removeClass('open') 
    }) 
    } 
    Dropdown.prototype = { 
    constructor: Dropdown 
    , toggle: function (e) { 
     var $this = $(this) 
     , $parent 
     , isActive 
     if ($this.is('.disabled, :disabled')) return 
     $parent = getParent($this) 
     isActive = $parent.hasClass('open') 
     clearMenus() 
     if (!isActive) { 
     $parent.toggleClass('open') 
     } 
     $this.focus() 
     return false 
    } 
    , keydown: function (e) { 
     var $this 
     , $items 
     , $active 
     , $parent 
     , isActive 
     , index 
     if (!/(38|40|27)/.test(e.keyCode)) return 
     $this = $(this) 
     e.preventDefault() 
     e.stopPropagation() 
     if ($this.is('.disabled, :disabled')) return 
     $parent = getParent($this) 
     isActive = $parent.hasClass('open') 
     if (!isActive || (isActive && e.keyCode == 27)) return $this.click() 
     $items = $('[role=menu] li:not(.divider):visible a', $parent) 
     if (!$items.length) return 
     index = $items.index($items.filter(':focus')) 
     if (e.keyCode == 38 && index > 0) index--          // up 
     if (e.keyCode == 40 && index < $items.length - 1) index++      // down 
     if (!~index) index = 0 
     $items 
     .eq(index) 
     .focus() 
    } 
    } 
    function clearMenus() { 
    $(toggle).each(function() { 
     getParent($(this)).removeClass('open') 
    }) 
    } 
    function getParent($this) { 
    var selector = $this.attr('data-target') 
    , $parent 
    if (!selector) { 
     selector = $this.attr('href') 
     selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 
    } 
    $parent = $(selector) 
    $parent.length || ($parent = $this.parent()) 
    return $parent 
    } 
    /* DROPDOWN PLUGIN DEFINITION 
     * ========================== */ 
    var old = $.fn.dropdown 
    $.fn.dropdown = function (option) { 
    return this.each(function() { 
     var $this = $(this) 
     , data = $this.data('dropdown') 
     if (!data) $this.data('dropdown', (data = new Dropdown(this))) 
     if (typeof option == 'string') data[option].call($this) 
     }) 
    } 
    $.fn.dropdown.Constructor = Dropdown 
    /* DROPDOWN NO CONFLICT 
     * ==================== */ 
    $.fn.dropdown.noConflict = function() { 
    $.fn.dropdown = old 
    return this 
    } 
    /* APPLY TO STANDARD DROPDOWN ELEMENTS 
     * =================================== */ 
    $(document) 
    .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus) 
    .on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) 
    .on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() }) 
    .on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle) 
    .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown) 
}(window.jQuery); 

risposta

3

Questo è il default behaviour. Le nav sono attivate da clic, non aleggia. Questo spiega perché facendo clic sull'ancora, si rivela il sottomenu invece di seguire il collegamento.

C'è un problema in this SO post.

+1

grazie Dotty, se mi tolgo la data-ginocchiera dalla 'a' tag, sembra funzionare, il mio jquery isn' fino a molto, ho provato a usare $ (document) .off ('. data-api', 'a'); ma niente da fare ... – nihilster

0

aggiungere questo css alla tua barra di navigazione

<style> 
ul.nav li.dropdown:hover ul.dropdown-menu{  display: block;  margin: 0 } 
</style> 

e aggiungere l'attributo

onclick="location.href='filename'" 

<a href="#" class="dropdown-toggle" onclick="location.href='filename'" data-toggle="dropdown"></a> 
-1
  1. modificare un tag in questo modo:

    <a class="dropdown-toggle" data-toggle="dropdown" data-clicked="false" onclick="clickMe(this);" data-target="#"> 
    
  2. Su di te JS file del componente aggiuntivo:

    function clickMe(obj){ 
        if($(obj).data('clicked') == 'true'){ 
         location.href = $(obj).attr('href'); 
        } 
        else { 
         $(obj).data('clicked','true'); 
        } 
    } 
    
9

È possibile impostare che, eliminando data-toggle="dropdown" dal markup HTML. Come aggiunta alla tua domanda, possiamo impostare il lavoro a cascata sul passaggio del mouse impostando data-hover="dropdown".

+2

Ho letto le risposte di una domanda simile e sono sicuro che nessuno possa battere questa risposta ..... – ksg

+2

Come funzionerebbe per i dispositivi mobili senza eventi di "passaggio del mouse"? –

1

sto cercando in questo con Bootstrap 3 e stato in grado di fare questo lavoro sul mio progetto assegnando collegamenti separati al testo e l'intervallo accento circonflesso:

<ul class="nav nav-pills nav-stacked left-menu" id="sub-nav"> 
    <li> 
    <a href="/schools-departments">Schools &amp; Departments</a> 
    <a href="javascript:void(0);" data-target="#item1" data-toggle="collapse" data-parent="#sub-nav" class="sub-drop"><span class="caret arrow"></span></a> 
    <ul class="nav nav-stacked collapse left-submenu" id="item1"> 
     <li><a href="#">School of Arts &amp; Sciences</a></li> 
     <li><a href="#">School of Education &amp; Behavioral Sciences</a></li> 
     <li><a href="#">School of Health Sciences</a></li> 
    </ul> 
    </li> 
</ul> 

poi aggiunti questo al css:

#sub-nav li a { 
    display: inline-block; 
} 
+0

È * obbligatorio * codificare e commerciale come '&'. – John

1

Un piccolo ritocco su quanto proposto sopra. Lavora per attivare o disattivare il menu a discesa e toccare di nuovo quando il menu è giù per seguire il link genitore

<script> 
function clickMe(obj){ 
    if($(obj).data('clicked') == 'true'){ 
     location.href = $(obj).attr('href'); 
    } 
    else{ 
    $(obj).data('clicked','true'); 
    } 
} 
</script> 

aggiungere un po 'html

<div class="collapse navbar-collapse"> 
<ul class="nav navbar-nav"> 
<li class="dropdown"> 
<a class="dropdown-toggle" data-toggle="dropdown" data-clicked="false" onclick="clickMe(this);" data-target="#" href="http://www.Add your link here.com">Link#1 <b class="caret"></b></a> 
<ul class="dropdown-menu">....your drop down list here 

js fiddle try it out

2

Possiamo semplicemente utilizzare quel codice:

$('#sub-nav > ul > li > a').click(function() { 

     location.href = $(this).attr('href'); 

    }) 
0

Suggerisco anche di testare la larghezza del corpo, quindi il nav mobile continua a funzionare p roperly. Così unico set location.href, se la dimensione del corpo è più grande del punto di interruzione:

$('.navbar-collapse a.dropdown-toggle').click(function() { 
    if($('body').width() >= "768") { 
    location.href = $(this).attr('href'); 
    } 
});