Git Product home page Git Product logo

Comments (6)

CWSpear avatar CWSpear commented on June 9, 2024

Right, my plugin should let you do that... let me do some double checking (sorry for the slower response. Been out of town).

What happened when you tried it? You aren't actually stating an issue here.

from bootstrap-hover-dropdown.

SmashBrando avatar SmashBrando commented on June 9, 2024

The issue is that the parent element does not link anywhere it only acts as a label (even though it has an href).

You can see an example here (try clicking "About The Tests") - http://11thstreetmedia.net/

from bootstrap-hover-dropdown.

CWSpear avatar CWSpear commented on June 9, 2024

Sorry, after looking deeper, some things came back to my memory. This is a duplicate of case #16. Bootstrap is preventing the default action for those nav items. If you want them to be clickable, you'll have to figure out a way to get around that, but it's something outside the scope of my plugin.

from bootstrap-hover-dropdown.

leniel avatar leniel commented on June 9, 2024

I'm using Bootstrap 3 now and to make the root node clickable I just returned true instead of false in the following bootstrap.js Dropdown toogle function but be aware that I didn't test this extensively... :)

Dropdown.prototype.toggle = function (e) {
    var $this = $(this)

    if ($this.is('.disabled, :disabled')) return

    var $parent  = getParent($this)
    var isActive = $parent.hasClass('open')

    clearMenus()

    if (!isActive) {
      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
        // if mobile we we use a backdrop because click events don't delegate
        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
      }

      $parent.trigger(e = $.Event('show.bs.dropdown'))

      if (e.isDefaultPrevented()) return

      $parent
        .toggleClass('open')
        .trigger('shown.bs.dropdown')

      $this.focus()
    }

    return true;
  }

from bootstrap-hover-dropdown.

CWSpear avatar CWSpear commented on June 9, 2024

Issue #16 was the solution under Bootstrap 2. I think it still applies because I think the function you pasted in here is bound to a click event. The reason returning true in your snippet works is because returning false in a jQuery event callback stops all propagation, including the default behavior of the current event. By returning true, you allow the event to behave normally.

Just be aware on the effect this will have on mobile users (if that's even a concern of yours).

from bootstrap-hover-dropdown.

leniel avatar leniel commented on June 9, 2024

Yeah... it's working great with Bootstrap 3. I tested it on an iPhone and
the touch works as expected.

On Friday, October 11, 2013, Cameron Spear wrote:

Issue #16https://github.com/CWSpear/twitter-bootstrap-hover-dropdown/issues/16was the solution under Bootstrap 2. I think it still applies because I
think the function you pasted in here is bound to a click event. The reason
returning true in your snippet works is because returning false in a jQuery
event callback stops all propagation, including the default behavior of the
current event. By returning true, you allow the event to behave normally.

Just be aware on the effect this will have on mobile users (if that's even
a concern of yours).


Reply to this email directly or view it on GitHubhttps://github.com//issues/27#issuecomment-26189523

from bootstrap-hover-dropdown.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.