1

JSFiddle リンク: http://jsfiddle.net/4QLDC/6

これは私のJSコードです:

var toggleContent = function (event) {
    $(event.target).siblings().toggle();
};
var showOrHidePanels = function () {
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    if (windowWidth < 980) {
        $(".headBar1").siblings().hide();
        $(".headBar1").parent().css("min-height", 0);
        $(".headBar1").css("cursor", "pointer");
        $(".headBar1").on("click", toggleContent);
    }
    else {
        $(".headBar1").siblings().show();
        $(".headBar1").parent().removeAttr("style");
        $(".headBar1").css("cursor", "auto");
        $(".headBar1").off("click", toggleContent);
    }
};
$(function () {
    showOrHidePanels();
});
$(window).resize(function () {
    showOrHidePanels();
});

これが私が達成しようとしていることです。

ウィンドウ幅が 300px 未満の場合:

  1. コンテンツ ボックスを折りたたむ必要があります
  2. 見出しはリンクになるはずです
  3. 見出しがクリックされると、そのコンテンツ ボックスが切り替わる必要があります

最初の 2 つが発生していますが、3 つ目は私が問題を抱えているものです。機能する場合と機能しない場合があります (動作は予測できません。JSFiddle ページで「結果」フレームのサイズを 6 ～ 7 回変更しようとすると、最初の 6 回は正常に機能しますが、 7回目）。私は何を間違っていますか？これを修正する方法は？

4

3 に答える 3

2

この素晴らしいブラウザの新時代により適したもう 1 つのアプローチは、 を使用すること@media (max-width: 300px)です。最新のブラウザはすべてこれを使用でき、特定の css ルールを適用するだけです。

/* Define css rules for when the windows is wider than 300px */

@media (max-width: 300px) {
    /* Set parent's min height and such */
    /* display: none and display: block relevant content */

    .headBar {
        cursor: pointer;
    }
}

私は個人的にこのアプローチを使用して、携帯電話や小さなウィンドウからサイトを表示できるようにしています。コツをつかめば、完全に機能します。

とにかく、あなたが行うほとんどの変更はcssに関連しています。あなたがする必要があるのは、クラスなどの適切な構造を持つことだけです。

于 2013-08-26T11:16:17.240 に答える
1 
var toggleContent = function (event) {
    $(event.target).siblings().toggle();
};
var showOrHidePanels = function () {
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    $(".headBar1").off("click");
    if (windowWidth < 300) {
        $(".headBar1").siblings().hide();
        $(".headBar1").parent().css("min-height", 0);
        $(".headBar1").css("cursor", "pointer");        
        $(".headBar1").on("click", toggleContent);
    }
    else {        
        $(".headBar1").siblings().show();
        $(".headBar1").parent().removeAttr("style");
        $(".headBar1").css("cursor", "auto");       
    }
};
$(function () {
    showOrHidePanels();
});
$(window).resize(function () {
    showOrHidePanels();
});

それはあなたが望んでいたものですか？

于 2013-08-26T11:09:28.370 に答える
1

どうぞ。フィドル: http://jsfiddle.net/4QLDC/8/

function toggleContent(ths) {
    console.log('toggle!');
    $(ths).siblings().toggle();
};
var showOrHidePanels = function () {
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    if (windowWidth < 300) {
        console.log('Under: ' + windowWidth)
        $(".headBar1").siblings().hide();
        $(".headBar1").parent().css("min-height", 0);
        $(".headBar1").css("cursor", "pointer");
        $(".headBar1").on("click.toggle", function(){ toggleContent(this); });
    } else {
        console.log('Over: ' + windowWidth)
        $(".headBar1").siblings().show();
        $(".headBar1").parent().removeAttr("style");
        $(".headBar1").css("cursor", "auto");
        $(".headBar1").off("click.toggle");
    }
};
$(function () {
    showOrHidePanels();
});
$(window).resize(function () {
    showOrHidePanels();
});

複数の CSS プロパティではなく、1 つのクラスのみを追加および削除する必要があるように、すべてのスタイルを CSS に移動して移動したいと考えています。フィドル: http://jsfiddle.net/4QLDC/12/

CSS:

.botContentBox {
    min-height: 200px;
    float:left;
    clear:none;
    border: 1px solid grey;
    margin: 0 10px 10px 0
}
.headBar1 {
    cursor: default;
    background-color: #880000;
    border:5px solid #fff;
    color:#fff;
    font-size:17px;
    line-height:17px;
    padding:10px 10px;
    width:auto;
    margin:0 0 5px 0
}
.botContentBox.lt300{
    min-height: 0px;
}
.botContentBox.lt300 .headBar1{
    cursor: pointer;
}
.botContentBox.lt300 .botContentHolder{
    display: none
}

JS:

var showOrHidePanels = function () {
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    if (windowWidth < 300) {
        console.log('Under: ' + windowWidth)
        $(".headBar1").parent().addClass('lt300');
        $(".headBar1").on("click.toggle", function(){ $(this).siblings().toggle(); });
    } else {
        console.log('Over: ' + windowWidth)
        $(".headBar1").siblings().show(); // in case it was toggled on/off
        $(".headBar1").parent().removeClass('lt300');
        $(".headBar1").off("click.toggle");
    }
};
$(function () {
    showOrHidePanels();
});
$(window).resize(function () {
    showOrHidePanels();
});
于 2013-08-26T11:16:01.153 に答える