0

メニュー タブとして機能する DIV にクラス (rShift) を適用しています。クラスはそれに:hover振る舞いを与えます。DIV をクリックすると、画面にメニューが表示されます。メニューを折りたたむと、クラスと:hover動作も失われます。

私は jQuery UI を使用しており.addClass('')、失われたクラスを適用しようとしましたが、うまくいきませんでした。

http://pastebin.com/hdb8Y2Keで参照してください。http://bharath.lohray.com/ftree/

ページが最初に読み込まれると、ページの左上隅、検索ボックスのすぐ下にタブが表示されます。マウスをホバリングすると、数ピクセル飛び出します。クリックすると、メニューが表示されます。タブをもう一度クリックすると、メニューが折りたたまれ、飛び出し効果が失われます :-(.

私は何を間違っていますか？

4

2 に答える 2

2

クラスが追加されていますが、クリックすると、インライン スタイルが jquery 経由で leftmenutab に直接適用されます。このスタイル (左) は、スタイル シートにあるすべてのスタイルをオーバーライドします。

jquery 経由で適用しているインライン スタイルを削除し、必要なスタイルを CSS に追加します。

次のようなスタイルを作成します。

.leftMenuTab[data-state="expanded"] { left: 100px; }
.leftMenuTab[data-state="collapsed"] { left: 0; }

JavaScript から次の行を削除します。

$(".leftMenuTab").css("left", "+=100px");
$(".leftMenuTab").css("left", "-=100px");

または、クリック時に leftMenuTab と leftMenu からクラスを追加および削除し、CSS でスタイルを設定します。このようなもの：

HTML:

<div class="leftMenu">Hello Menu</div>
<div class="leftMenuTab" data-state="collapsed">
<span class="charIcon"></span>
</div>

JS:

$('.leftMenuTab').click(function(e) {
  $('.leftMenuTab,.leftMenu').toggleClass('expanded');
}

CSS:

.leftMenuTab .charIcon:after{
  content:'>>';
}

.leftMenuTab.expanded .charIcon:after{
  content:'<<';
}
.leftMenuTab {
    background-color: #FFFFFF;
    border-color: #000000;
    cursor: pointer;
    float: left;
    padding-right: 5px;
    position: absolute;
    text-align: right;
    top: 45px;
    width: 30px;
    z-index: 2;
    left: -10px;
}
.leftMenuTab:hover {left:0;}
.leftMenuTab.expanded { left:100px;}
于 2013-06-25T05:44:28.323 に答える
1

要素のスタイルを変更した後、スタイルleft: 0px;は DIV に残され、ホバーの効果が無効になります。

これは関連するコードです:

$('.leftMenuTab').click(function(e) {
    temp = $(this);
    if ($('.leftMenuTab').attr('data-state') == "collapsed") {
        $(".charIcon", this).html("&laquo;");
        $('.leftMenuTab').attr('data-state', 'expanded');
        $(".leftMenu").css("left", "+=110px");
        $(".leftMenuTab").css("left", "+=100px");
    } else {
        $(".charIcon", this).html("&raquo;");
        $('.leftMenuTab').attr('data-state', 'collapsed');
        $(".leftMenu").css("left", "-=110px");
        $(".leftMenuTab").css("left", "-=100px");
        $(this).addClass("rShift");
    }
});

最も簡単な解決策は、leftスタイルを変更するのではなく、スタイルを消去することです (クラスを再度追加する必要はありません)。

$('.leftMenuTab').click(function(e) {
    temp = $(this);
    if ($('.leftMenuTab').attr('data-state') == "collapsed") {
        $(".charIcon", this).html("&laquo;");
        $('.leftMenuTab').attr('data-state', 'expanded');
        $(".leftMenu").css("left", "+=110px");
        $(".leftMenuTab").css("left", "+=100px");
    } else {
        $(".charIcon", this).html("&raquo;");
        $('.leftMenuTab').attr('data-state', 'collapsed');
        $(".leftMenu").css("left", ""); //set to empty string
        $(".leftMenuTab").css("left", ""); //set to empty string
        //$(this).addClass("rShift"); //Not needed
    }
});

注: これは、Web からのローカル コピーでテストされました。

于 2013-06-25T05:47:17.233 に答える