#javascript #jquery #html #css #list
#javascript #jquery #HTML #css #Список
Вопрос:
Мне нужно иметь иерархический, сворачиваемый список, состоящий из 3 столбцов. У меня работают первые две части, но, похоже, я не могу правильно настроить CSS для третьей. На рисунке показан текущий код:
(Слегка дублированный текст слева от col3 — это визуальная ошибка со скрипкой.)
Цель состоит в том, чтобы иметь псевдотаблицу с тремя столбцами внутри сворачиваемого списка, так что col1 имеет стандартный отступ списка, а col2 центрируется для всех уровней, а col3 находится справа для всех уровней. Это должно выглядеть так:
Я попытался добиться этого, заставив их оба перемещаться вправо, а затем добавив поле / отступ либо к col2, либо к col3, чтобы переместить col2 в середину, где я хочу, чтобы он был. Однако каким-то образом col2 оказывается за пределами col3. Мне кажется невозможным, но с CSS никакая ошибка невозможна.
Я пробовал различные другие комбинации margin s и padding s и float: left s, но безуспешно.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<div id="listContainer">
<div class="listControl">
<a id="expandList"><button>Expand All</button></a>
<a id="collapseList"><button>Collapse All</button></a>
</div>
<ul id="expList">
<li>
<div class="col1">Non-parent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
</li>
<li>
<div class="col1">Parent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
<ul>
<li>
<div class="col1">Child</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
</li>
</ul>
</li>
<li>
<div class="col1">Grandparent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
<ul>
<li>
<div class="col1">Parent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
<ul>
<li>
<div class="col1">Child</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
</li>
</ul>
</li>
<li>
<div class="col1">Parent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
<ul>
<li>
<div class="col1">Child</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
CSS:
/********************/
/* EXPANDABLE LIST */
/********************/
#listContainer {
margin-top: 15px;
}
#expList ul,
#expList li {
list-style: none;
margin: 0;
padding: 0;
cursor: pointer;
}
#expList p {
margin: 0;
display: block;
}
#expList p:hover {
background-color: #121212;
}
#expList li {
line-height: 140%;
text-indent: 0px;
background-position: 1px 8px;
padding-left: 20px;
background-repeat: no-repeat;
}
/*This works in Firefox following W3C standards, but not in other browsers!*/
/*https://drafts.csswg.org/css-lists/#marker-content*/
/* Collapsed state for list element */
#expList .collapsed {
/* list-style-type: " ";*/
list-style: none;
/*padding: 0px;*/
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
/*list-style-type: "-";*/
list-style: none;
/*padding: 0px;*/
}
/*code that works for non-Firefox*/
#expList .collapsed:before {
content: " ";
width: 1em !important;
margin-left: -1.2em;
display: inline-block;
}
#expList .expanded:before {
content: "-";
width: 1em !important;
margin-left: -1.2em;
display: inline-block;
}
#expList {
clear: both;
}
.col1 {
display: inline;
/*padding-right: 100px;*/
}
.col2 {
display: inline;
float: right;
}
.col3 {
display: inline;
float: right;
}
JS:
/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible */
/**************************************************************/
function prepareList() {
$('#expList').find('li:has(ul)')
.click(function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
//Hack to add links inside the cv
$('#expList a').unbind('click').click(function() {
window.location($(this).attr('href'));
return false;
});
//Create the button funtionality
$('#expandList')
.unbind('click')
.click(function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children('ul').show('medium');
})
$('#collapseList')
.unbind('click')
.click(function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children('ul').hide('medium');
})
};
/**************************************************************/
/* Functions to execute on loading the document */
/**************************************************************/
$(document).ready(function() {
prepareList()
});
Комментарии:
1. Итак, в чем именно проблема?
2. Ваш вопрос неясен, можете ли вы предоставить желаемый результат? Я понимаю, что вы пытались это объяснить, но ваше объяснение не самое ясное. Можете ли вы, возможно, проиллюстрировать графику, которую вы уже предоставили, с желаемыми результатами?
3. «Цель состоит в том, чтобы иметь псевдотаблицу с тремя столбцами внутри сворачиваемого списка, так что col1 имеет стандартный отступ списка, а col2 центрируется для всех уровней, а col3 находится справа для всех уровней». Это то, что я хочу. Мне кажется понятным. Я добавил рисунок.
4. @Deleet Это то, что (jsfiddle) вы хотели.?
5. Я не вижу большой разницы. Похоже, вы только что добавили ширину? Посмотрите на рисунок выше. У вас также есть столбцы в неправильном порядке (как и моя попытка).
Ответ №1:
Решение этой проблемы состояло в том, чтобы понять, что float: right , по-видимому, также выравнивает блоки по правому краю, чтобы они отображались в обратном порядке. Имея это в виду, можно просто изменить порядок блоков, чтобы вернуть нормальный порядок.
Например.:
<div class="col1">Non-parent</div>
<div class="col4">Col4</div>
<div class="col3">Col3</div>
<div class="col2">Col2</div>