1

だから、私は簡単なメニューを持っています：1つをクリックすると1つのアイテムが表示され、2つをクリックすると2つのアイテムが表示されます。ONEとTWOにはトグル機能があるので、クリックすると上下にスライドしますが、ONEを閉じずにTWOをトグルすると、面倒になります。

$(function() {

$('li.sub', '#navigation').each(function() {

var $li = $(this);
var $div = $('div.submenu', $li);
var top = $li.height();

$li.toggle(function() {

  $div.css('top', top).
  slideDown('slow');

},

function() {

  $div.
  slideUp('slow');

  });

 });

});

フィドル： http： //jsfiddle.net/vGSWm/2/

4

2 に答える 2

2

あなたはこれを試すことができます

$(function() {
    $('#navigation li.sub').click(function(e) {
        var el = $(this).find('.submenu');
        $('.submenu').not(el).slideUp(function(){
            el.slideToggle();
        });
    });
});

デモ。

アップデート ：

$(function() {
    $('#navigation li.sub').click(function(e) {
        var el = $(this).find('.submenu');
        if(el.hasClass('open'))
        {
            el.slideUp(function(){
                el.removeClass('open');
            });
        }
        else
        {
            var opened = $('.submenu.open');
            if(opened.length)
            {
                opened.slideUp(function(){
                    opened.removeClass('open');
                    el.slideToggle(function(){
                        el.addClass('open');
                    });
                })
            }
            else
            {
                el.slideToggle(function(){
                    el.addClass('open');
                });
            }
        }
    });
});

デモ。

于 2013-02-25T00:57:31.723 に答える
1

この問題を解決するには、既に開いているリスト項目のトグルをプログラムでトリガーする必要があります。

これを行う最も簡単な方法は、すべての div を非表示にするためにクリックしたばかりのメニューの div を表示する前にコードを追加することです。

たとえば、次のように関数を編集します。

$li.toggle(function() {

  $('div.submenu:visible').parent('li.sub').click();

  $div.css('top', top).
  slideDown('slow');

},

このソリューションでは、2 つ以上のリスト アイテムが必要になる可能性があり、任意の数にスケーリングされることを前提としています。リスト項目が 2 つしかないことがわかっている場合は、リスト項目を直接呼び出すことができます。

于 2013-02-25T00:06:33.007 に答える