jQuery 移动 Accordion

Question

我有一个 jQuery ListView 和以下代码将其更改为 Accordion 。 <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()

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

这里是event.stopPropagation()的文档:http://api.jquery.com/event.stopPropagation/