6
votes

BOOTSTRAP Drop Dropdown Niveau Navigation Faire un lien cliquable

J'utilise le thème WordPress The-Bootstrap pour créer un menu avec des dérouplements, mais la liaison de niveau supérieur ne révèle que la liste déroulante sur le clic et ne va pas sur une page elle-même lorsque vous avez cliqué. Donc, dans www.thermoryuk.co.uk/wp/ quand je clique sur 'Flooring', je veux aller à la page de revêtement de sol et révéler la liste déroulante. Code ci-dessous, merci d'avance

/* ============================================================
     * 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);


0 commentaires

8 Réponses :


3
votes

C'est le comportement par défaut . Les NAV sont activées par des clics, pas survolés. Cela explique pourquoi cliquer sur l'ancrage, révèle le sous-menu au lieu de suivre le lien.

Il y a un travail autour de cela donc post .


1 commentaires

Merci Dotty, si je supprimais la bascule de données de la balise "A", il semble fonctionner, ma jQuery n'est pas à la hauteur, j'ai essayé d'utiliser $ (document) .off (". Data-Api '," '); Mais rien de faire ...



0
votes

Ajoutez ce CSS à votre barre NAVBAR

onclick="location.href='filename'"

 <a href="#" class="dropdown-toggle" onclick="location.href='filename'" data-toggle="dropdown"></a>


0 commentaires

-1
votes
  1. modifier une étiquette comme ceci: p>

    function clickMe(obj){ 
        if($(obj).data('clicked') == 'true'){
            location.href = $(obj).attr('href');
        }
        else {
            $(obj).data('clicked','true');
        }
    }
    
  2. sur votre fichier JS Ajouter: P>

    <a class="dropdown-toggle" data-toggle="dropdown" data-clicked="false" onclick="clickMe(this);"  data-target="#">
    

0 commentaires

12
votes

Vous pouvez définir cela en supprimant data-toggle = "Dropdown" à partir de votre balisage HTML. En plus de votre question, nous pouvons définir le travail déroulant sur Mouseover en définissant data-hover = "Dropdown" .


2 commentaires

J'ai suivi les réponses de la même question et je suis sûr que personne ne peut battre cette réponse .....


Comment cela fonctionnerait-il pour les appareils mobiles sans événements «Mouseover»?



1
votes

Je suis à la recherche de cela avec Bootstrap 3 et je suis capable de faire ce travail sur mon projet en attribuant des liens distincts au texte et au carlet Span: xxx

a ajouté ceci à la CSS: xxx


0 commentaires

1
votes

Un peu de peau sur ce qui a été proposé ci-dessus. Fonctionne pour basculer le menu déroulant et appuyez à nouveau lorsque le menu est réduit pour suivre la liaison parent

<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


0 commentaires

3
votes

Nous pouvons simplement utiliser ce code:

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

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

    })


0 commentaires

0
votes

Je suggère également de tester la largeur du corps, la navigation mobile continue donc de fonctionner correctement. Donc seulement définit l'emplacement.href, si la taille du corps est plus grande que le point d'arrêt:

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


0 commentaires