0

メニュー制御を行うために、jqueryでsuperfish（http://users.tpg.com.au/j_birch/plugins/superfish/#aa ）を使用しています。ほぼすべての要素がで設定されています

  • にネストされた要素。スーパーフィッシュメニューが閉じるたびに非表示にしたいメニュー項目が1つあります（.show（）を使用して他の場所に表示します）。したがって、私のスーパーフィッシュの初期化は次のようになります。

    $(document).ready(function () {
    $("#menu").superfish({
          delay: 400,
          onHide: function () { $("#HideThis").hide(); }
     });
 });

    ただし、代わりに、HideThisにカーソルを合わせるとHideThisが非表示になります（ホバーイベントはその要素にバインドされません）。これにより、メニューが閉じたときではなく、クリックしようとすると非表示になるため、メニュー項目が使用できなくなります。私の目的に合うイベントは他にないようですが、スーパーフィッシュでこれを機能させる方法はありますか？

    私が使用しているHTMLは次のようになります。

    <ul id="menu">
  <li id="Stuff"><span>Stuff</span>
     <ul>
        <li id="HideThis" ><span>Hide This</span>
           <ul>
              <li><span>Hidden Stuff</span></li>
           </ul>
        </li>
        <li id="DontHideThis" ><span>Dont Hide This</span></li>
     </ul>
  </li>
</ul>

    編集：問題を見つけることができました：'onHide'イベントは、メニュー全体が非表示になったときだけでなく、サブメニューが非表示になるたびにトリガーされます（実際、メニューが最初に表示されたときにもトリガーされます。したがって、onHideはより頻繁に発生しますあなたが期待するよりも）。だから、私は次のようにonHideをフィルタリングする必要がありました：

    $(document).ready(function () {
   $("#menu").superfish({
      delay: 400,
      onHide: function () { if ($('ul.sf-menu li.sfHover').length == 0) $("#HideThis").hide(); }
   });
});

    また、「if」ステートメントは、すべてのメニューが折りたたまれている場合にのみ真になります。

    • 4

    1 に答える 1

    1

    この種のもののためにjsFiddleを作成する方が良いでしょう。私はここであなたを1つ作り、その.sf-menuスタイリングを掛けるためのクラスに加えて、いくつかの大雑把なスタイリングを追加しました。私が見ることができることから、あなたのコードはあなたが望むように機能しているようです。これで問題が解決しない場合は、私が欠けているものを自由に説明してください。

    于 2013-03-08T10:08:41.077 に答える