单击一个 div 并转到响应式网站上的另一个

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 我设置为 display:none；和红色 div width: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 轮播选项，但我认为这不适用于我的网站。

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

Answer 1

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

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

这是更新后的 Fiddle。

Answer 2

适用于您的场景的快速 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();
});
});

Answer 3

您可以使用 jQuery 并为小屏幕隐藏特定的 class 来执行此操作 - 这样您就不必在 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/

单击一个 div 并转到响应式网站上的另一个

Click one div and goes to another on responsive website

html

javascript

responsive-design