如何更改CSS類onclick？

Question

我有一個導航欄。 我想對其進行設置，以便當用戶單擊“ departments選項卡時，css div將向下滑動並顯示一些內容。 我想用2個偽類設置它。 例如

dropdown.hide，.dropdown.show“。dropdown.hide

將位於標題上方並向下滑動（通過CSS轉換），當用戶單擊“部門”選項卡時，它將轉換為新類(.show) 。 關於如何實現這一目標的任何想法？

這是我當前的代碼 。 （請注意毛刺邊緣）

提前致謝 ：）

Answer 1

您可以混合使用jQuery（用於更改類）和CSS3（用於過渡）。 因此，您的CSS設置正確，並確保設置了以下兩個參數：

.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 。 這將附加到click事件處理程序。 如果要在: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;
    });
});

如果您計划為每個菜單項使用不同的子菜單，則需要將它們添加到nav > ul > li的<a href...>...</a>標記旁邊。 示例代碼為：

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

我認為，您不應將兩個類用於同一個div 。 一個.hide和.show是沒有必要的。 取而代之的是，剛才的.hide是默認之間切換， .show ！

Answer 2

您必須在jQuery中使用Mouseover和Mouseout函數。 我更喜歡用jQuery而不是CSS來做這種事情...

$('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');
});

Answer 3

根據我對您問題的理解，以下是我動態更改類的解決方案。

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

如果我錯了，請糾正我......

Answer 4

使用toggleClass （）

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

或slideToggle（）

$('div').slideToggle(1000);