0

ナビゲーションバーがあります。departmentsユーザーがタブをクリックすると、css div が下にスライドしてコンテンツが表示されるように設定したいと思います。これを2つの疑似クラスで設定したいと思います。例えば

dropdown.hide、.dropdown.show".dropdown.hide

(.show)ヘッダーの上に配置され、(css トランジションを使用して) 下にスライドされます。ユーザーが部門タブをクリックすると、新しいクラスに変換されます。これをやってのける方法についてのアイデアはありますか？

これが私の現在のコードです。（グリッチエッジを許してください）

前もって感謝します ：）

4

4 に答える 4

1

jQuery (クラスの変更用) と CSS3 (トランジション用) を組み合わせて使用​​できます。したがって、CSS が適切に設定されており、次の 2 つのパラメーターが設定されていることを確認してください。

.dropdown.show {transition: all 2s ease;}
.dropdown.hide {transition: all 2s ease;}

jQuery 部分については、クリック時にクラスを変更するために使用します。

$(document).ready(function(){
    $("nav > ul > li > a").toggle(function(){
        $(this).next('.dropdown').removeClass("hide").addClass("show");
        return false;
    }, function(){
        $(this).next('.dropdown').removeClass("show").addClass("hide");
        return false;
    });
});

このためには.dropdown、リンクの横に , を配置する必要があります。これは、クリック イベント ハンドラーにアタッチされます。オンにしたい場合は:hover、次のコードを使用できます。

$(document).ready(function(){
    $("nav > ul > li > a").toggle(function(){
        $(this).next('.dropdown').removeClass("hide").addClass("show");
        return false;
    }, function(){
        $(this).next('.dropdown').removeClass("show").addClass("hide");
        return false;
    });
});

メニュー項目ごとに異なるサブメニューを計画している場合は、<a href...>...</a>内の タグの横に追加する必要がありますnav > ul > li。サンプルコードは次のとおりです。

<div class="wrapper">
    <nav>
        <ul>
            <li>
                <a href="#">Home</a>
                <div class="dropdown hide">
                    <!-- Dropdown Menu -->
                </div>
            </li>
        </ul>
    </nav>
</div>

私の意見では、同じ に 2 つのクラスを使用するべきではありませんdiv。A .hideand.showは必要ありません。代わりに、.hidebe default と.show!を切り替えます。

于 2013-05-17T03:54:47.767 に答える
0

toggleClass ()を使用する

$('div').toggleClass('hide').toggleClass('show');

またはslideToggle()

$('div').slideToggle(1000);
于 2013-05-17T04:02:24.230 に答える
0

あなたの質問に対する私の理解によると、クラスを動的に変更するための私の解決策は次のとおりです。

$(".className").click(function() {
    $(this).addClass("NewClassName");
});

間違っていたら訂正してください........

于 2013-05-17T03:59:26.727 に答える
0

jQuery で Mouseover および Mouseout 関数を使用する必要があります。この種のことには、CSSの代わりにjQueryを使用することを好みます...

$('nav').find('a').on('mouseover', function(){
    $('body').append('<div id="divNavBar">Some content</div>');
    $(this).addClass('YourClassName');
}).on('mouseout', function(){
    $('#divNavBar').remove();
    $(this).removeClass('YourClassName');
});
于 2013-05-17T03:56:41.060 に答える