0

特定のメニュー項目で構成される垂直リスト メニューを作成しました。メニュー項目をクリックすると、リストが展開され、その内部のサブメニュー項目が表示されます。

また、ページが読み込まれると、ページに応じてメニューの 1 つが自動的に展開されます。これには jquery トグルを使用しましたが、正常に動作しています。

ここで、 jquery アコーディオンの場合と同様に、このメニューに折りたたみ/展開矢印を配置し、クリック イベントで切り替えます。

私の問題は、ページが読み込まれると、メニュー項目の 1 つが折りたたまれますが、矢印が折りたたまれず、そのメニューをもう一度クリックして折りたたむ/元に戻すと、矢印がトグルし始めることです。

状況は次のように見ることができます。

►メニュー1

サブメニュー

サブメニュー

サブメニュー

►メニュー2

►メニュー3

►メニュー4

ご覧のとおり、menu1 の矢印は下向きではありません。

まだ私のコード -

<ul>
<div class="option-heading">
  <li onclick="menu()"> //menu is the vertical menu which shows up.
      <a href="#" >
        <div class="arrow-up">&#9658;</div>
        <div style="display: none;" class="arrow-down">&#9660;</div>
      </a>
  </li>
  </div> 
</ul>    

<script>
$(document).ready(function() {
     $(".option-heading").click(function(){
     $(this).find(".arrow-up, .arrow-down").toggle();
});
});

.load を使用しましたが、すべての矢印が一度に展開されます。

私が知りたいのは、ウィンドウの読み込み時に特定の要素を切り替える方法だけです。他の要素が影響を受けないようにします。現状は矢印のように。load イベントがトリガーされるたびに、すべての矢印が切り替わります。

4

2 に答える 2

0

$(this)を指す.option-heading; オプションの見出し (すべての矢印が切り替えられているのはそのためです)。アクティブなオプション見出しにクラスを追加して、一意にする必要があります。

このようなものは仕事をするかもしれません:

$(document).ready(function() {
   $(".option-heading").click(function(){
     $(".option-heading").removeClass("active");
     $(this).addClass("active");
     $(".option-heading.active").find(".arrow-up, .arrow-down").toggle();
   });
});
于 2013-09-16T07:23:37.430 に答える
0

div矢印を表示するために1つを使用する方が良いと思います。これを参照してください：

<div class="arrow expanded"></div>
or
<div class="arrow"></div>

CSS スタイル:

div.arrow {       /* default/collapsed style */
    width: 20px;
    height: 20px;
    backgound: url('address of collapse image'); /* if use image for arrow */
    /* content: &#9658;  */ /* if use special character */
}

div.arrow.expanded { /* expanded style */
    backgound: url('address of expand image'); /* if use image for arrow */
    /* content: &#9660;  */ /* if use special character */
}

このアプローチでは、次の方法で矢印アイコンを簡単に切り替えることができます。

$('div.arrow').toggleClass('expanded');

または、次の方法で展開/折りたたみを確認できます。

var isExpanded = $('div.arrow').is('.expanded');
于 2013-09-16T07:28:38.150 に答える