Переместите колонку, не перемещайте весь элемент JQUERY - PullRequest
Новая
       2

Переместите колонку, не перемещайте весь элемент JQUERY

0 голосов
/ 16 октября 2019

Кажется, я не могу понять, как заставить левый столбец перебраться как наложение ... не переместить всю таблицу. Я видел примеры того, как он перекрывает всю страницу, но мне просто нужно, чтобы это накладывалось на вложенную секцию, а не на всю страницу.

Я не совсем уверен, что вы называете, когда левый столбец скользит поверх внутреннего элемента, но я видел примеры его скольжения по всей странице, мне просто нужно, чтобы он скользил по верхней части div. 

<code><!DOCTYPE html>
<html lang="en">

<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>

$(document).ready(function () {
$(".toggle-sidebar").click(function () {
$("#sidebar").toggleClass("collapsed");
$("#content").toggleClass("col-md-12 col-md-9");

return false;
});
});
</script>
<style>
html,
body {
height: 100%;
}
.jumbotron {
margin-top: 30px;
}
#content,
#sidebar {
min-height: 500px;
}
#row-main {
overflow-x: hidden; /* necessary to hide collapsed sidebar */
}
#content {
background-color: lightyellow;

-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
-o-transition: width 0.3s ease;
transition: width 0.3s ease;
}
#content .btn-group {
margin-bottom: 10px;
}
.col-md-9 .width-12,
.col-md-12 .width-9 {
display: none; /* just hiding labels for demo purposes */
}
#sidebar {
background-color: lightgrey;

-webkit-transition: margin 0.3s ease;
-moz-transition: margin 0.3s ease;
-o-transition: margin 0.3s ease;
transition: margin 0.3s ease;
}
.collapsed {
display: none; /* hide it for small displays */
}
@media (min-width: 992px) {
.collapsed {
display: block;
margin-left: -25%; /* same width as sidebar */
}
}

#sortable { list-style-type: none; margin: 0; padding: 0; width: 50%; }
#sortable li { margin: 0 3px 3px 3px; font-size: 1.4em; height: 15px; }
#sortable li span { position: absolute; margin-left: -1.25em; }
</style>

</head>

<body>

<div class="container">
<div class="row" id="row-main">
<div class="col-md-3" id="sidebar">
side area
</div>
<div class="col-md-9" id="content">
<div class="btn-group" role="group" aria-label="Controls">
<button type="button" class="btn btn-default toggle-sidebar">Toggle sidebar</button>
</div>
<pre>Inner

Скрипка: - https://jsfiddle.net/nrqpay4k/

1 Ответ

0 голосов
/ 16 октября 2019

Если вы хотите, чтобы боковая панель шла поверх остального контента, вы должны сделать его position: absolute.

Вы также должны вынуть его из таблицы.

Этоэто то, что вам нужно: 

#sidebar {
  background-color: lightgrey;
  width: 200px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  transition: transform 500ms ease-in-out;
}

.collapsed {
  transform: translateX(-100%)
}

Я также немного изменил HTML, чтобы убрать боковую панель из элемента строки.

____ update - добавлена ​​кнопка закрытия _____

Чтобы добавить кнопку закрытия, добавьте следующий HTML в контейнер боковой панели: 

 <button id="closeSidebar">x</button>

CSS выглядит следующим образом: 

#closeSidebar {
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 10px;
  cursor: pointer;
}

И, наконец, Javascriptэто следующее: 

  $("#closeSidebar").click(function() {
    $("#sidebar").toggleClass("collapsed");
    return false;
  });

Проверьте, хотите ли вы: https://jsfiddle.net/wnpv2got/2/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...