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. 单击标题时，其内容框应切换

前两个正在发生，但第三个是我遇到的麻烦。有时它可以工作，有时则不能（行为是不可预测的；在 JSFiddle 页面中，如果您尝试调整“结果”框架的大小 6-7 次，它会在前六次正常工作，但失败第七次）。我究竟做错了什么？如何解决这个问题？

4

3 回答 3

2

另一种更适合这个令人敬畏的浏览器新时代的方法是使用@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 中，以便只需要添加和删除一个类，而不是多个 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 回答