самазагрузкі выпадаючыя верхняй панэлі навігацыі ўзроўню зрабіць спасылку інтэрактыўнай

I'm using the-bootstrap wordpress theme to create a menu with drop-downs, however the top-level link only reveals the drop-down on clicking & does not go to a page itself when clicked. So in www.thermoryuk.co.uk/wp/ when I click 'Flooring' I want to go to the flooring page as well as revealing the dropdown. Code below, thanks in advance




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

8 адказы

Вы можаце ўсталяваць, што шляхам выдалення дадзеных тумблер = «раскрываецца» з вашай HTML-разметкі. У дадатак да вашага пытання, мы можам усталяваць выпадальны працу на навядзенні курсора мышы, усталяваўшы дадзеных лунання = «раскрываецца» .

9
дададзена
Я прайшоў праз адказы на падобнае пытанне, і я ўпэўнены, што ніхто не можа пабіць гэты адказ .....
дададзена аўтар ksg, крыніца
Як бы гэтая праца для мабільных прылад без падзей «навядзення мышы»?
дададзена аўтар Alex Holsgrove, крыніца

Гэта паводзіны па змаўчанні . Навігацыйны актывуюцца пстрычкамі, а не парыць. Гэта тлумачыць, чаму націснуўшы на якар, з'яўляецца выяўленне падменю, замест таго, каб рухацца па спасылцы.

Там ёсць праца вакол у гэты пост SO .

3
дададзена
дзякуй кропкавае, калі я выдаліць дадзеныя з-тумблер "а" тэга, здаецца, працуе, мой jQuery не да шмат, я паспрабаваў з дапамогай $ (дакумент) .off ( «дадзеныя па API», 'а «); але нічога не робіць ...
дададзена аўтар nihilster, крыніца

Мы можам проста выкарыстоўваць гэты код:

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

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

    })
2
дададзена
  1. Modify A tag like this:

    
    
  2. On you JS file add:

    function clickMe(obj){ 
        if($(obj).data('clicked') == 'true'){
            location.href = $(obj).attr('href');
        }
        else {
            $(obj).data('clicked','true');
        }
    }
    
1
дададзена

Я гляджу на гэта з Bootstrap 3 і быў у стане зрабіць гэтую працу на маім праекце, прызначаючы асобныя спасылкі на тэкст і карэтка пралёта:




Затым дадалі гэта ў CSS:

#sub-nav li a {
  display: inline-block;
}
1
дададзена
Вы павінен Кадаваць Ампэрсанд як і .
дададзена аўтар John, крыніца

Трохі Твік на тое, што было прапанавана вышэй. Работы па Пераключыце выпадальнае меню і націсніце яшчэ раз, калі меню ўніз прытрымлівацца бацькоўскай спасылцы

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

дадаць некаторыя HTML

<div class="collapse navbar-collapse">
1
дададзена

дадаць CSS у панэлі навігацыі


і дадаць атрыбут

onclick="location.href='filename'"

 
0
дададзена

Я прапаную таксама выпрабоўваць для шырыні цела, так што мабільныя навігацыйныя працягвае працаваць належным чынам. Такім чынам, толькі ўсталяваць location.href, калі памер цела больш, чым кропка супыну:

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