Question

我遇到的问题是，当我在页面中向下移动并按下菜单时，它显示的位置远离应该显示的位置。

HTML脚本

<div class="drop_it" data-dropdown="#dropdown-1"></div>
  <div id="dropdown-1" class="dropdown dropdown-tip">
    <ul class="dropdown-menu">
      <li><a href="#">Create Page</a></li>
      <li><a href="#">Add Product</a></li>
      <li><a href="#">Manage Them</a></li>
      <li class="dropdown-divider"></li>
      <li><a href="#">Create Ads</a></li>
      <li><a href="#">Manage Ads</a></li>
      <li class="dropdown-divider"></li>
      <li><a href="#">Settings</a></li>
      <li><a href="#">Logout</a></li>
      <li class="dropdown-divider"></li>
      <li><a href="#">Getting Started</a></li>
      <li class="dropdown-divider"></li>
      <li><a href="#">Help</a></li>
      <li><a href="#">Report a Problem</a></li>
    </ul>
  </div>

=============================================== ======================

Jquery脚本

if (jQuery) (function ($) {

    $.extend($.fn, {
        dropdown: function (method, data) {

            switch (method) {
                case 'show':
                    show(null, $(this));
                    return $(this);
                case 'hide':
                    hide();
                    return $(this);
                case 'attach':
                    return $(this).attr('data-dropdown', data);
                case 'detach':
                    hide();
                    return $(this).removeAttr('data-dropdown');
                case 'disable':
                    return $(this).addClass('dropdown-disabled');
                case 'enable':
                    hide();
                    return $(this).removeClass('dropdown-disabled');
            }

        }
    });

    function show(event, object) {

        var trigger = event ? $(this) : object,
      dropdown = $(trigger.attr('data-dropdown')),
      isOpen = trigger.hasClass('dropdown-open');

        // In some cases we don't want to show it
        if (event) {
            if ($(event.target).hasClass('dropdown-ignore')) return;

            event.preventDefault();
            event.stopPropagation();
        } else {
            if (trigger !== object.target && $(object.target).hasClass('dropdown-ignore')) return;
        }
        hide();

        if (isOpen || trigger.hasClass('dropdown-disabled')) return;

        // Show it
        trigger.addClass('dropdown-open');
        dropdown
      .data('dropdown-trigger', trigger)
      .show();

        // Position it
        position();

        // Trigger the show callback
        dropdown
      .trigger('show', {
        dropdown: dropdown,
        trigger: trigger
      });

    }

    function hide(event) {

        // In some cases we don't hide them
        var targetGroup = event ? $(event.target).parents().addBack() : null;

        // Are we clicking anywhere in a dropdown?
        if (targetGroup && targetGroup.is('.dropdown')) {
            // Is it a dropdown menu?
            if (targetGroup.is('.dropdown-menu')) {
                // Did we click on an option? If so close it.
                if (!targetGroup.is('A')) return;
            } else {
                // Nope, it's a panel. Leave it open.
                return;
            }
        }

        // Hide any dropdown that may be showing
        $(document).find('.dropdown:visible').each(function () {
            var dropdown = $(this);
            dropdown
        .hide()
        .removeData('dropdown-trigger')
        .trigger('hide', { dropdown: dropdown });
        });

        // Remove all dropdown-open classes
        $(document).find('.dropdown-open').removeClass('dropdown-open');

    }

    function position() {

        var dropdown = $('.dropdown:visible').eq(0),
      trigger = dropdown.data('dropdown-trigger'),
      hOffset = trigger ? parseInt(trigger.attr('data-horizontal-offset') || 0, 10) : null,
      vOffset = trigger ? parseInt(trigger.attr('data-vertical-offset') || 0, 10) : null;

        if (dropdown.length === 0 || !trigger) return;

        // Position the dropdown relative-to-parent...
        if (dropdown.hasClass('dropdown-relative')) {
            dropdown.css({
                left: dropdown.hasClass('dropdown-anchor-right') ?
          trigger.position().left - (dropdown.outerWidth(true) - trigger.outerWidth(true)) - parseInt(trigger.css('margin-right'), 10) + hOffset :
          trigger.position().left + parseInt(trigger.css('margin-left'), 10) + hOffset,
                top: trigger.position().top + trigger.outerHeight(true) - parseInt(trigger.css('margin-top'), 10) + vOffset
            });
        } else {
            // ...or relative to document
            dropdown.css({
                left: dropdown.hasClass('dropdown-anchor-right') ?
          trigger.offset().left - (dropdown.outerWidth() - trigger.outerWidth()) + hOffset : trigger.offset().left + hOffset,
                top: trigger.offset().top + trigger.outerHeight() + vOffset
            });
        }
    }

    $(document).on('click.dropdown', '[data-dropdown]', show);
    $(document).on('click.dropdown', hide);
    $(window).on('resize', position);
})(jQuery);

Answer 1

这是我。当我在页面顶部时，它很好地显示出来。没有错误或不同的动作。但当我向下移动页面时，它也向下移动。

Jquery下拉菜单在幻灯片中远处显示的地方

1 个答案: