Есть div
блоки в виде папок. Как сделать, что бы при первом клике ссылка переходила в состояния выделения, а уже при втором клике открывалась? Например как в Windows
.
И если у меня выделена 1 папка, то когда я выделяю 2 папку с 1 папки выделение должно убраться.
Есть примерный код
$('.folder').click(function() {
if ($(this).hasClass('active')) {
alert('Opening folder..');
} else {
$(this).addClass('active');
$(this).children('.folder__description').show();
}
});
* {
box-sizing: border-box;
}
body {
background: #F2F3F5;
font-family: Arial;
font-size: 13px;
}
.folder {
width: 150px;
height: 150px;
text-align: center;
padding: 20px;
cursor: pointer;
}
.folder:hover {
background: rgba(0, 0, 0, .1);
}
.folder.active {
background: #fff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .2);
}
.folder__title {
margin-bottom: 20px;
}
.folder__description {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="folder">
<div class="folder__title">New Folder</div>
<div class="folder__description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
Или по ссылке – http://codepen.io/anon/pen/jWBBOW
Вообщем хочу сделать как в файловом менеджере при первом клике на папку в сайдбаре показалась информация из БД а при втором клике она открывалась!
\\UPD/// и как мне из БД вывести доп. информацию о папке, если у меня их например 20шт. на странице? а folder__description не в диве folder а отдельно в сайдбаре??
UPDATE: @АлексейШиманский спасибо, я теперь не могу понять как подставить ссылку в двойной клик, делаю так:
$(document).on('dblclick', '.wellprod', function() {
$('.wellprod').removeClass('active_c');
$(this).addClass('active_c');
location.href = link;
});
где link
это переменная с ссылкой, все ок, но эта ссылка получается одна для всех папок на странице, а мне нужно site.com/view.php?id={ID}
или если это не категория то site.com/edit.php?id={ID}
где {ID}
- это уникальный идентификатор из БД