0

私はまだjavascript/jqueryについて少し学んでいて、衝突に遭遇しています。私がプルするすべての投稿は、すべての余分なコードが本当に必要でない限り、プロセスを過度に複雑にしているようです.

これが私がやっていることです：

  • スライド メニューと静的サブメニューを使用した垂直ナビゲーション メニューの作成
  • DL、DT、および DD での HTML (5) レイアウトの使用
  • ナビゲーション メニューはスタイリングにマイナーな CSS を使用しています
  • ナビゲーション メニューは jQuery (1.8.3) を使用しています

私はすべて思い通りに動作していますが、うるさいので、メニューが展開された後に一時的にリンクを無効にしたいと考えています。すでに展開されているメニューをクリックしようとすると、上にスライドしてから下に戻ります。私がやりたかったのは、既に展開されている場合はクリックに反応しないようにすることです。

ナビゲーション メニューの HTML:

<dl class="nav2">
  <dt><a href="#">Thing1</a></dt>
    <dd>
        <ul>
            <li><a href="#">Test Def1</a></li>
            <li><a href="#">Test Def2</a><li>
            <li><a href="#">Test Def3</a></li>
        </ul>
    </dd>
  <dt><a href="#">Thing2</a></dt>
    <dd>
        <ul>
            <li><a href="#">Test Def4</a></li>
            <li><a href="#">Test Def5</a><li>
            <li><a href="#">Test Def6</a></li>
        </ul>
    </dd>
  <dt><a href="#">Thing3</a></dt>
    <dd>
        <ul>
            <li><a href="#">Test Def7</a></li>
            <li><a href="#">Test Def8</a><li>
            <li><a href="#">Test Def9</a></li>
        </ul>
    </dd>
</dl>

ナビゲーション メニューの jQuery:

$(document).ready(function() {
  $("dd:not(:first)").hide();
  $("dt a").click(function() {
    /* was thinking the added code would go here, but I could be wrong */
    $("dd:visible").slideUp("fast");
    $(this).parent().next().slideDown("fast");
    return false;
  });
});

bind と one でいくつかのことを試しましたが、js/jquery の記述に混乱しているため、自分のトリックが見つかりません。とにかく次のようなことを言うことは可能ですか：

$(this:active).unbind("click");

また

if ($(this).active(function() {
  $(this).unbind("click");
} else {
  $(this).bind("click");
)};

私はおそらく道から外れていることを知っていますが、私は試しています。これをjavascript/jQueryに変更する方法はありますか?

When the DT A is clicked -
  make THIS DT / DT A not clickable;
  When THIS DT / DT A is no longer expanded or visible -
  make THIS DT / DT A clickable;

ピークありがとう。これがどこかで見つかった場合は申し訳ありません。私が遭遇した各投稿は、CSS を攻撃するかどうかにかかわらず、この小さな変更を数行のコードに拡張し始め、javascript/jQuery またはその両方が必要と思われるものよりも長くなります。私は本当にそれを封じ込めてシンプルに保ちたいと思っています（可能な場合）。

4

2 に答える 2

2

クリックを無効にしたくない (アンカーを無効にするか、イベントのバインドを解除する)。クリックした要素が現在選択されているときにアクションを実行したくない。次のようにします。

$(document).ready(function() {
    var active = $("dd:first");
    $("dd").not(active).hide();
    $("dt a").click(function() {
        var dd = $(this).parent().next();
        if (! dd.is(active)) {
            active.slideUp("fast");
            active = dd.slideDown("fast");
        }
        return false;
    });
});
于 2013-01-16T20:09:50.227 に答える
1

クリックされたリンクに一時クラスを追加し、イベントによってトリガーされたアクションが完了したら、そのクラスを削除できます。リンクがhasClassでクリックされるたびにクラスをテストします。クリックされる場合は何もせず、クリックされない場合は何かを行います。私はここで同様の質問に答えました：

jQueryイベント処理を一時的に抑制します

これがあなたのコードでどのように機能するかです（私はあなたのニーズに合うように修正が必要かもしれませんが）：

$(document).ready(function() {
  $("dd:not(:first)").hide();
  $("dt a").click(function(e) {

    // Prevent link from doing default action
    e.preventDefault();

    if ($(this).hasClass('fired') == false) {

        // Add 'fired' class to disable link
        $(this).addClass('fired');

        // Do some stuff
        $("dd:visible").slideUp("fast");
        $(this).parent().next().slideDown("fast");

        // Remove 'fired' class to re-enable the link
        // You may need to do this in a call back function
        // If you are animating something
        $(this).removeClass('fired');

    }

    // Use preventDefault instead of this
    /*return false;*/
  });
});
于 2013-01-16T20:18:29.503 に答える