Question

我有一个jQuery listview和以下代码将它改成手风琴。在<li>内，我有一个“ui-li-accordion”类的div，它隐藏了内容，然后点击显示。

我遇到的问题是我想在div中添加下拉菜单，但是当我点击下拉列表时，div会再次滑回。

我需要的是，如果单击div中的任何位置，则不会执行滑动操作。只有在那之外。

/*
 * jQuery Mobile Framework : listview accordion extension
 * Copyright (c) Boris Smus, Christopher Liu
 * Note: Code is in draft form and is subject to change
 */
(function($, undefined ) {

    $( "[data-role='listview']" ).live( "listviewcreate", function() {
        var list = $( this ),
        listview = list.data( "listview" );

        var accordionExpandOne = function(accordion) {
            // Close all other accordion flaps
            list.find('.ui-li-accordion').slideUp();
            // Open this flap
            accordion.slideToggle();
        }
        var accordionDecorator = function() {
            list.find('.ui-li-accordion').each(function(index, accordion) {
                // Format the accordion accordingly:
                // <li>...normal stuff in a jQM li
                // <div class="ui-li-accordion">...contents of this</div>
                // </li>
                // If we find an accordion element, make the li action be to open the accordion element
                // console.log('accordion found ' + accordion);
                // Get the li
                var $accordion = $(accordion);
                $li = $accordion.closest('li');
                // Move the contents of the accordion element to the end of the <li>
                $li.append($accordion.clone());
                $accordion.remove();
                // Unbind all click events
                $li.unbind('click');
                // Remove all a elements
                $li.find('a').remove();
                // Bind click handler to show the accordion
                $li.bind('click', function() {
                    var $accordion = $(this).find('.ui-li-accordion');
                    // Check that the current flap isn't already open
                    if ($accordion.hasClass('ui-li-accordion-open')) {
                        $accordion.slideUp();
                        $accordion.removeClass('ui-li-accordion-open');
                        return;
                    }
                    console.log('continue');
                    // If not, clear old classes
                    list.find('.ui-li-accordion-open').removeClass('ui-li-accordion-open');
                    $accordion.toggleClass('ui-li-accordion-open');
                    accordionExpandOne($accordion);
                });
            });
        };
        var accordionExpandInitial = function() {
            //Expand anything already marked with -open.
            accordionExpandOne(list.find('.ui-li-accordion-open'));
        };

        accordionDecorator();
        accordionExpandInitial();

        // Make sure that the decorator gets called on listview refresh too
        var orig = listview.refresh;
        listview.refresh = function() {
            orig.apply(listview, arguments[0]);
            accordionDecorator();
        };
    });
})( jQuery );

Answer 1

如何在选择菜单的事件处理程序中使用event.stopPropagation();：

$('#container-element').find('select').bind('click', function (event) {
    event.stopPropagation();
});

<强> event.stopPropagation（）

阻止事件冒泡DOM树，防止任何事件   家长处理人员被告知该事件。

此处为event.stopPropagation()的文档：http://api.jquery.com/event.stopPropagation/

jQuery移动手风琴

1 个答案: