0

これを理解するのに苦労しています。どんな助けでも素晴らしいでしょう、事前に感謝します

こんな感じのメニューがあります

HTML

<li class="menuItem"><a href="#" class="drop" onclick="doWork();">Phones</a>

        <div class="flyout">

            <div class="col_1">

                <a href="#"><h3>Phones</h3></a>
                <ul>
                    <li><a href="https://www.google.com/" target="_top">Nokie</a></li>
                    <li><a href="https://www.google.com/" target="_blank">Iphone</a></li>
                    <   
                </ul>            
        </div>   
    </li>

2つのCSSで

.menuItem:hover {
border: 1px solid #777777;  

/* Background color and gradients */
background: #fafafa; /* Old browsers */
background: -moz-linear-gradient(top, #fafafa 0%, #fcfcfc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(70%,#fcfcfc), color-stop(100%)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fafafa 0%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fafafa 0%,#fcfcfc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fafafa 0%,#fcfcfc 100%); /* IE10+ */
background: linear-gradient(to bottom, #fafafa 0%,#fcfcfc 100%); /* W3C */

/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}

.menuItem:hover .flyout
 {
display:block;
top:auto;
left:0px;
}

onclick 関数でこれらの 2 つのクラスをどのように呼び出しますか?

4

1 に答える 1

0

jQueryを使用して、クラスを追加/削除または切り替えます。

$( document ).ready(function() {
    $("p").click(function () {
        $('.menuItem').addClass('flyout');
    });
});

これはCSSで：

.flyout {
    display:block;
    top:auto;
    left:0px;
}
于 2013-07-18T10:56:06.333 に答える