单击下一项时如何显示工具栏（并隐藏当前）？

Question

how to show toolbar (and hide current) when i click on next similar element? in my code, when i click on next similar element, toolbar doesn't disappear, he disappears only if i firsly click on body and then on element, how to remove toolbar without clicking to body to show next toolbar? thx! http://jsfiddle.net/wwL8fgr1/1/

$(".element").on('mouseup', function(e){

        $('[el-button]').click(function(e){
            e.preventDefault();
        });

        var toolbar  = $('<div class="dm-popover"></div>');

        if ( !$('.dm-popover').hasClass('in') ) {
            setTimeout(function(){
                toolbar.addClass('in');
            },100);
            $('body').prepend(toolbar);
        }

        toolbar.addClass('dm-link-frontend-control-top');

        toolbar.css({
            left: $(this).offset().left,
            top:  $(this).offset().top - toolbar.height() - 10  
        });

        setTimeout(function(){
            $('body').on('mouseup', function(e){
                if($(e.target).closest(toolbar).length == 0){
                    $('body').unbind('click', arguments.callee);
                        toolbar.removeClass('in');
                        toolbar.remove();
                }
            });
        }, 100);

        e.stopPropagation();
});

Answer 1

The code responsible for removing the toolbar is here:

$('body').on('mouseup', function(e){
    if($(e.target).closest(toolbar).length == 0){
        $('body').unbind('click', arguments.callee);
        toolbar.removeClass('in');
        toolbar.remove();
    }
});

Note this registers a mouseup handler on body . That's why you need to click on body to remove the toolbar. You can attach this handler to the second element, if that's what you expect.

EDIT

My guess is that you wanted to achieve something like in this fiddle . Note that is is suitable for 2 elements only, if you need more similar elements , you'd probably need to make a function to generate id's for you instead of storing them in data- attributes.

My opinion:

Your code seems overly complex - you're using timeouts, swapping css, mouseup instead of click , creating div elements on each click, preventing handler's propagation... Try to make it simpler by removing unnecessary stuff.

Answer 2

You can try this

$(".element").on('mouseup', function(e){

            $('[el-button]').click(function(e){
                e.preventDefault();
            });

            if ( !$('.dm-popover').hasClass('in') ) 
            {
                var toolbar  = $('<div class="dm-popover"></div>');
                setTimeout(function(){
                    toolbar.addClass('in');
                },100);
                $('body').prepend(toolbar);
            }
            else
            {
                var toolbar  = $('.dm-popover');
            }    

            toolbar.addClass('dm-link-frontend-control-top');

            toolbar.css({
                left: $(this).offset().left,
                top:  $(this).offset().top - toolbar.height() - 10  
            });

            setTimeout(function(){
                $('body').on('mouseup', function(e){
                    if($(e.target).closest(toolbar).length == 0){
                        $('body').unbind('click', arguments.callee);
                            toolbar.removeClass('in');
                            toolbar.remove();
                    }
                });
            }, 100);

            e.stopPropagation();
        });

See the JSFiddle http://jsfiddle.net/wwL8fgr1/3/