-3

特定のページの初めてのモバイルバージョン用にjQueryを作成しようとしています。ブラウザのサイズが小さいことを検出すると、記事のリストのみが表示されます。ユーザーが記事をクリックしたら、リストを最小化し、その記事をメインコンテンツに表示したいと思います。記事がクリックされたときにリストを非表示にすることでこれを実行しようとしていますが、ページを何にでも作成するという基本的な手順をほとんど超えることができません。これが、マウスオーバーで記事リストの周囲に境界線を置くだけの私の試みです。

<script>
    if( $(window).width() < 481 && $(window).width() > 0 ) {
        $("div.st_tabs_container").mouseover(function () {
            alert("asdfasd");
            $("div.st_tabs_container").css("border", "3px double red");
           alert("swear words");
        });
    } else {
    }
</script>

これで何かを実行できる唯一の方法は、（ "*"）。mouseover（function）{と書くことです。すべてを選択すると、マウスオーバーが機能し、st_tabs_containerに赤い境界線が表示され、アラートがオフになります。他のもの（.ie $（ "div.st_tabs_container"））を選択しようとすると、機能しません。誰かがこれを説明できますか？簡単なことだと思いますが、うまくいきません。さらに悪いことに、クリック時に実行する必要のある実際の要素はdiv.st_verticalul.st_tabsa.st_tab_activeです。私はそれを選択するコードを書くことができませんでした。ありとあらゆる知恵をいただければ幸いです。

4

1 に答える 1

1

たとえば、次のようにします。http: //jsfiddle.net/ZMBWZ/ うまくいかない場合は、画面を小さくします。

html：

<div class="st_tabs_container"></div>

css：

div{
 height: 100px;
  width: 100px;
  border: 1px solid red;
}

Jquery：

$(function () {
    if ($(window).width() < 481 && $(window).width() > 0) {
        $("div.st_tabs_container").mouseover(function () {
            alert("asdfasd");
            $("div.st_tabs_container").css("border", "3px double red");
            alert("swear words");
        });
    }else{}
});
于 2013-01-18T00:11:52.050 に答える