0

このサイトで見つけたいくつかのコーディングを利用して、JQuery で折りたたみ可能なメニューを作成しました。

そして、すべてが機能します。しかし、今こそ、それがどのように、そしてなぜ機能するのかを理解する時です.

JQuery:

jQuery(document).ready(function($) {
var submenu = $('.submenu').hide();

$('.open').click(function() {
  $this = $(this);
  $target =  $this.parent().next();

  if(!$this.hasClass('close')){
     $('.open').removeClass('close');
     submenu.slideUp();
     $this.addClass('close');
     $target.slideDown();
  }else{
     $target.slideUp();
     $this.removeClass('close');
  }
});
});

HTML と CSS は次の場所にあります: JSFIDDLE !

誰かが私のためにコードを分解して、それが何をするのか説明してもらえますか?

ページの読み込み時に .submenu クラスが非表示になることはわかっています。クラスをクリックすると、サブメニューが開きます。滑り落ちる

しかし、それが私の .close クラスで何をするのか、私は少し迷っています。

前もって感謝します！

4

2 に答える 2

0

ユーザーがメニュー グループをクリックするときは、次の 2 つのケースを考慮する必要があります。

  1. closeクリックされたメニュー グループは閉じられています (つまり、クラスがありません)。

    !$this.hasClass('close')

    その場合は、まず開いているすべてのメニューを閉じ、それに応じてクラスを設定する必要があります。

    $('.open').removeClass('close');
submenu.slideUp();

    次に、クリックしたメニュー グループを展開し、現在開いているものとしてマークできます。

    $this.addClass('close');
$target.slideDown();

  2. クリックしたメニュー グループは既に開いています。その場合に行う必要があるのは、メニューを閉じることだけです。

    $target.slideUp();
$this.removeClass('close');
于 2013-06-16T18:59:08.833 に答える