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

Question

您好，我正在尝试让我的网站具有响应能力。我的网站上有两个不同的 div，一左一右，就像这样......

http://jsfiddle.net/1fupx7aa/2/

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 的位置。

这可能吗？

我一直在研究引导轮播选项，但我认为这不适用于我的网站。

我该怎么调用它？这可能吗？是否有一种方法，如果我单击移动设备上的红色 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/