0

jQuery の Click-Function を使用すると、奇妙な動作が発生します。on-EventHandler でも試してみました。Twitter の Bootstrap Navbar からいくつかの簡単なマークアップがあり、li-tag の CSS クラスを変更しようとしています。この場合、アクティブな CSS クラスを削除し、現在クリックされている li-tag に追加します。しかし、変更はワンクリックで適用されます。そのため、たとえば「プレビュー」が現在のビジュアル アクティブ要素で、「ドキュメント」をクリックすると、CSS クラスが変更されないように見えます。後で「スライドキャスト」をクリックすると、視覚的なアクティブ要素は「ドキュメント」であり、これは予期された動作ではありません。次に「プレビュー」をクリックすると、「スライドキャスト」が視覚的なアクティブ要素になります。私が間違っていることは何ですか？remove と add と toggleClass で試してみましたが、しかし、それは問題ではありません。これが私のコードとマークアップです。JS は Dom-Ready-Function にラップされます。

<div class="navbar">
  <div class="navbar-inner">
    <ul class="nav">
      <li class="active"><a href="#!document_defaultview">Document</a></li>
      <li><a href="#!document_slidecast">Slidecast</a></li>
      <li><a href="#!document_preview">Preview</a></li>
      <li><a href="#!document_notes">Notes</a></li>
      <li><a href="#!document_questions">Questions</a></li>
      <li><a href="#!document_activities">Activities</a></li>
    </ul>
  </div>
</div>

JS

$("#document_navbar a").on('click', function(e) {

    // Hide all content, display the one related to hash-tag    
    $(".document_view").toggle(false);
    $(app_locationToId($(this).attr("href"))).toggle(true);


    // Here is the part that does not work:     
    //$("#document_navbar li.active").removeClass("active");
    //$("a[href='" + window.location.hash + "']").parent().addClass('active');

            // Another try ... same result as described above!  
    $("#document_navbar li.active").toggleClass("active", false);
    $("a[href='" + window.location.hash + "']").parent().toggleClass("active", true);
});

あなたの答えによると、これが私がその問題を処理するために使用したコードです:

$("#document_navbar a").on('click', function(e) {

    new_location = app_locationToId($(this).attr("href"));

    // Hide all content, display the one related to hash-tag    
    $(".document_view").toggle(false);
    $(new_location).toggle(true);
    // Change visual active li-tag
    $("#document_navbar li.active").toggleClass("active", false);
    $("a[href='" + app_IdToLocation(new_location) + "']").parent().toggleClass("active", true);
});
4

3 に答える 3

2

「アクティブな」クラスを追加するために、ウィンドウ オブジェクトで hashchange イベントを処理できます。

$(".navbar li a").on('click', function(e) {
    // Hide all content, display the one related to hash-tag    
    $(".document_view").toggle(false);    
    $('.navbar li').removeClass("active", false);
});

$(window).on('hashchange', function() {
    $("a[href='" + window.location.hash + "']").parent().addClass("active", true);
});

jsfiddle

于 2013-03-25T19:42:52.013 に答える
0

私の最善の推測はwindow.location.hash、クリックハンドラーが完了した後に更新されることです。その結果、クリック ハンドラーで常に「古い」場所が取得されます。その後、場所は更新されますが、次のクリックまで使用されません... したがって、常にワンクリックで済みます。

これをテストするために、クラス トグルの実行を少し遅らせます。

$("#document_navbar a").on('click', function(e) {

    // Hide all content, display the one related to hash-tag    
    $(".document_view").toggle(false);
    $(app_locationToId($(this).attr("href"))).toggle(true);

    setTimeout(function() {
        $("#document_navbar li.active").toggleClass("active", false);
        $("a[href='" + window.location.hash + "']").parent().toggleClass("active", true);
    }, 1000);
});
于 2013-03-25T19:41:49.407 に答える
0

クリック機能がトリガーされるwindow.location.hashと、実際のページの 1 つになります。したがって、ハッシュが変更されていることを確認してから、それを取得してクラスをトグルする必要があります。

私のもののコードスニペットを検索し、すぐに編集/投稿します。:)

編集：

これは、history.js クラスを使い始める前の私の古いプロジェクトの 1 つのスニペットです。

$(function () {
    "use strict";
    var hashListener = null, hashValue = '', hashQuery;

    function checkIfHashChanged() {
        var hashQuery = window.location.hash;
        if (hashQuery === hashValue) { return; }
        hashValue = hashQuery;

        //Do the toggle
        $("#document_navbar li.active").toggleClass("active", false);
        $("a[href='" + hashQuery + "']").parent().toggleClass("active", true);
    }

    function startHashListener() {
        setInterval(checkIfHashChanged, 100);
    }

    function stopHashListener() {
        if (hashListener !== null) { clearInterval(hashListener); }
        hashListener = null;
    }

    startHashListener();

});

このコードは、クリック関数の外部で実行され、ハッシュリスナーの間隔中にハッシュ変更をリッスンするだけです。

于 2013-03-25T19:36:31.390 に答える