Question

您好我想让我的网站做出回应。我有两个不同的div，一个在左边，一个在我的网站上，就像这样......

HTML

<div class="menu"></div>
<div class="view"></div>

CSS

.menu {
    width:100px;
    height:100px;
    float: left;
    background-color: red;
}

.view {
     width: 200px;
     height:300px;
     background-color: yellow;
     float:left;
}

在网站上，当我点击红色div时，内容会显示在黄色div上。

我现在正试图让我的网站响应，所以我想做的是在一个较小的屏幕上，我设置显示的黄色div：none;和红色div宽度：100％像这样......

http://jsfiddle.net/3jmbxumb/

HTML

<div class="menu"></div>
<div class="view"></div>

CSS

@media (max-width: 600px) {

.menu {
    width:100%;
  }

 .view {
    display: none;
  }
}

现在我需要做的是，当我点击红色div时，我希望黄色div中的内容出现在我创建一个返回红色div的后退按钮的位置。

这可能吗？

我一直在寻找bootstrap carousel选项，但我认为这不适用于我的网站。

我会怎么称呼它，这可能吗？可能有一种方法，如果我点击移动设备上的红色div，红色div会隐藏，只有黄色div出现？

Answer 1

你可以使用jQuery并为小屏幕设置一个特定的隐藏类 - 所以你不必检查js中的屏幕宽度。

使用Javascript：

var showContent = function () {
    var $yellow = $('#yellow-view'),
        $this = $(this);

    //Hide red and show yellow
    $yellow.removeClass('hidden-small');
    $this.addClass('hidden-small');

    //Add content to yellow view
    $yellow.html('<strong>my content</strong>');
};

$('#menu').click(showContent);

CSS：

.menu {
    width:100px;
    height:100px;
    float: left;
    background-color: red;
}

.view {
 width: 200px;
 height:300px;
 background-color: yellow;
 float:left;
}

@media (max-width: 600px) {

.menu {
    width:100%;
  }

  .hidden-small {
    display: none;
    }
}

https://jsfiddle.net/s9wkbL9m/2/

Answer 2

您可能希望使用jQuery来执行此操作。

$(document).ready(function(){
    $('.menu').click(function(){
        $('.view').fadeIn();
    });
});

以下是更新后的Fiddle。

Answer 3

适用于您的场景的快速JS写作

$(function(){
$(".back_btn").hide();

if($(window).width() <= 600){
    $(".view").hide();
}

$(".menu").click(function(){
    if($(window).width() <= 600){
       $(".menu").hide();
       $(".view").show().text("Some text");
       $(".back_btn").show();
    }
    else {
       $(".view").text("Some text");
    }
});

$(".back_btn").click(function(){
    $(".view").hide();
    $(".menu").show();
});
});

点击一个div，然后转到另一个响应式网站

3 个答案: