没有通过jQuery的类

Question

所以我试图用：

创建一个3列布局

左侧面板栏：可滚动的垂直菜单。默认显示但可切换。
右侧面板栏：可滚动的操作菜单。默认隐藏但可切换。
内容：可滚动内容，可调整为页面的剩余内容，因此每当左，右下o面板（见下面的点）切换时，内容将不会被覆盖，div将自行调整。
底部面板：不可滚动。默认隐藏但可切换。当显示它应该粘在屏幕的底部并在那里保持可见，即使我滚动内容div）。这也应该与上述内容面板一样宽。

到目前为止，我能够创建一个带有可切换的左右列的代码段，内容正在适应它：

＆＃13;

$(".header_container > .content").append(() => {
  return "header<br>";
});

$(".right_container > .content").append(() => {
  return "MENU ITEM RIGHT<br>".repeat(100);
});

$(".left_container > .content").append(() => {
  return "MENU ITEM LEFT<br>".repeat(100);
});

$(".terminal_container > .content").append(() => {
  return "terminal ".repeat(100);
});

$(".body_container > .content").append(() => {
  return "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>".repeat(100);
});

$(".hideleft").click(() => {
  $(".left_container").toggle();
});

$(".hideright").click(() => {
  $(".right_container").toggle();
});

＆＃13;

.container {
  width: 90%;
  height: 180px;
  border: 3px solid;
  position: absolute;
}

.header_container {
  width: 100%;
  height: 50px;
  background-color: #DDD;
}

.left_container {
  height: 100%;
  width: 200px;
  background: green;
  float: left;
  overflow: scroll;
}

.center_container {
  width: auto;
  height: 100%;
  background: red;
  overflow: scroll;
}

.right_container {
  height: 100%;
  width: 200px;
  background: blue;
  float: right;
  overflow: scroll;
  display: none;
}

.terminal_container {
  height: 200px;
  overflow: hidden;
  background-color: black;
  color: white;
}

.content {
  padding: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="hideleft">Toggle Left</button>
<button class="hideright">Toggle Right</button>

<div class="container">
  <div class="right_container">
    <div class="content">
    </div>
  </div>
  <div class="left_container">
    <div class="content">
    </div>
  </div>
  <div class="center_container">
    <div class="body_container">
      <div class="content">
      </div>
    </div>
    <div class="terminal_container">
      <div class="content">
      </div>
    </div>
  </div>
</div>

＆＃13;

但是我无法让CSS用于底部日志面板（可能只有css）。

有人可以帮我解决如何设置底部面板吗？

Answer 1

没有通过jQuery的类

试试这个。我很确定+选择器是CSS3。

$(".header_container > .content").append(() => {
  return "header<br>";
});

$(".right_container > .content").append(() => {
  return "MENU ITEM RIGHT<br>".repeat(100);
});

$(".left_container > .content").append(() => {
  return "MENU ITEM LEFT<br>".repeat(100);
});

$(".terminal_container > .content").append(() => {
  return "terminal ".repeat(100);
});

$(".body_container > .content").append(() => {
  return "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>".repeat(100);
});

$(".hideleft").click(() => {
  $(".left_container").toggle();
});

$(".hideright").click(() => {
  $(".right_container").toggle();
});

$(".hidebottom").click(() => {
  $(".terminal_container").toggle();
});

.container {
  width: 90%;
  height: 180px;
  border: 3px solid;
  position: absolute;
}

.header_container {
  width: 100%;
  height: 50px;
  background-color: #DDD;
}

.left_container {
  height: 100%;
  width: 200px;
  background: green;
  float: left;
  overflow: scroll;
}

.center_container {
  width: auto;
  height: 100%;
  background: red;
}

.right_container {
  height: 100%;
  width: 200px;
  background: blue;
  float: right;
  overflow: scroll;
  display: none;
}

.body_container {
  height: 100%;
  overflow: scroll;
}

#bottom {  display: none;  }

#bottom:checked + .body_container {
  height: 80%;
}

.terminal_container {
  height: 20%;
  overflow: hidden;
  display: none;
  background-color: black;
  color: white;
}

.content {
  padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="hideleft">Toggle Left</button>
<button class="hideright">Toggle Right</button>
<label class="hidebottom" for="bottom">Toggle Bottom</label>

<div class="container">
  <div class="right_container">
    <div class="content">
    </div>
  </div>
  <div class="left_container">
    <div class="content">
    </div>
  </div>
  <div class="center_container">
    <input type="checkbox" id="bottom">
    <div class="body_container">
      <div class="content">
      </div>
    </div>
    <div class="terminal_container">
      <div class="content">
      </div>
    </div>
  </div>
</div>

使用类通过jQuery

此解决方案在切换是否显示时添加类，然后通过CSS设置宽度。

我通常会使用百分比而不是像素来计算所有元素的宽度，这样我就不必使用calc语句。

$(".hideleft").click(() => {
  $(".left_container").toggle();
  $("body").toggleClass("left");
});

$(".hideright").click(() => {
  $(".right_container").toggle();
  $("body").toggleClass("right");
});

$(".hidebottom").click(() => {
  $(".terminal_container").toggle();
  $("body").toggleClass("bottom");
});

.container {
  width: 90%;
  height: 70%;
  border: 3px solid;
  position: absolute;
}

.header_container {
  width: 100%;
  height: 50px;
  background-color: #DDD;
}

.left_container {
  height: 100%;
  width: 20%;
  background: green;
  float: left;
  overflow: scroll;
}

.right_container {
  height: 100%;
  width: 20%;
  background: blue;
  float: right;
  overflow: scroll;
  display: none;
}

.center_container {
  width: auto;
  height: 100%;
  position: relative;
}

.body_container {
  background: red;
  overflow: scroll;
  position: absolute;
  top: 0;
  height: 100%
}

.terminal_container {
  height: 100px;
  width: 100%;
  overflow: hidden;
  background-color: black;
  color: white;
  position: absolute;
  bottom: 0;
}

.content {
  padding: 15px;
}

/* Layout */
.left .center_container {
  float: right;
  width: 80%;
}

.right .center_container {
  float: left;
  width: 80%;
}

.left.right .center_container {
  width: 60%;
}

.bottom .body_container {
  bottom: 100px;
  height: auto;
  width: 100%;
}

<body class="left">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
  <div class="right_container">
    <div class="content">
    MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>
    </div>
  </div>
  <div class="left_container">
    <div class="content">
    MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>
    </div>
  </div>
  <div class="center_container">
    <div class="body_container">
      <header>
        <button class="hideleft">Toggle Left</button>
        <button class="hideright">Toggle Right</button>
        <button class="hidebottom">Toggle Bottom</button>
      </header>
      <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
      </div>
    </div>
    <div class="terminal_container" style="display: none">
      <div class="content">
      terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal 
      </div>
    </div>
  </div>
</div>
</body>

固定3列布局中的可切换页脚

1 个答案:

没有通过jQuery的类

使用类通过jQuery