1

Есть 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} - это уникальный идентификатор из БД

3

2 ответа 2

2

Как в комментариях отметил @Grundy - можно воспользоваться готовыми решениями библиотек и самого javascript

javascript: https://developer.mozilla.org/en-US/docs/Web/Events/dblclick - правда неизвестно есть ли поддержка у мобильников.

Jquery: https://api.jquery.com/dblclick/

Пример:

$(document).on('click', '.clicked-div', function() {
  $('.clicked-div').children('div').hide();
  $('.clicked-div').removeClass('active');
  
  $('#infobar').text($(this).children('div').text());
  
});


$(document).on('dblclick', '.clicked-div', function() {
  $('.clicked-div').removeClass('active');

  $(this).addClass('active');
});
 div.clicked-div {
   background: blue;
   color: white;
   height: 100px;
   width: 150px;
   margin: 10px;
    background: url(http://www.large-icons.com/stock-icons/large-symbol/closed_folder-icon.gif) 50% 50% no-repeat;
 }
 .clicked-div > div {
   display: none;
 }
 div.dbl {
   background: yellow;
   color: black;
 }
 .clicked-div.active {
   background: url(http://icons.iconseeker.com/png/128/toolbar-icons-2/opened-folder.png) 50% 50% no-repeat;
 }
   
   #infobar {
     display: inline-block;
     }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clicked-div">
  <div>some info1</div>
</div>

<div class="clicked-div">
  <div>some info2</div>
</div>

<div class="clicked-div">
  <div>some info3</div>
</div>

<div id="infobar-wrap">
  <span>clicked folder info:</span> <span id="infobar"></span>
<div>

А если изобретать свой велосипед, то может поможет вот это:

var id = 0;
$('.folder').click(function() {
	if ($(this).hasClass('active')) {      
		alert('already opened');
		return false;
	}
  
	if ($(this).attr('data-id') == id) {
		$(this).addClass('active');
		$(this).children('.folder__description').show();
		alert('Opening folder....');
		id = 0;    
		return false;
	}
  
	$('.folder').removeClass('active');
	$('.folder').children('.folder__description').hide(); 
  
	$(this).attr('data-id', Math.random());
	id = $(this).attr('data-id');
	
	setTimeout(function(){
    $('div[data-id="'+ id + '"]').removeClass('active');
      id = 0;
    }, 400);

});
* {
  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;
  border: 4px solid red;
  margin: 10px
}
.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>
<div class="folder">
  <div class="folder__title">New Folder</div>
  <div class="folder__description">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</div>

Ссылка на Codepen

Возможно я тут не всё учел)) Но, возможно, будет полезно.

15
  • нет поддержки только On disabled form elements все остальное во всех работает
    – Grundy
    12 янв 2016 в 10:13
  • @Grundy внимательность - не моя лучшая черта :-) 12 янв 2016 в 10:17
  • Бывает :-) по мобильникам, кстати, у них скорее будет использован свое событие типа double tap какого-нибудь
    – Grundy
    12 янв 2016 в 10:21
  • Вообщем хочу сделать как в файловом менеджере при первом клике на папку в сайдбаре показались свойства из БД а при втором клике она открывалась! 12 янв 2016 в 10:22
  • @John Freeman ну в таком случае из моего кода нужно удалить строку $(this).children('.folder__description').show(); из того места, где находится сейчас и поставить её сразу после id = $(this).attr('data-id'); будет так. Хотя скорее вам не только дабл клик надо обрабатывать а еще фокус....... при фокусе - показывать данные, а при даблклике уже что-то делать...тогда тут другая логика будет :-D 12 янв 2016 в 10:25
1
  1. Создай события клика для двух классов class1 и class2
  2. Присвой всем div class1
  3. В событиях для class1 добавь код, который меняет элементу аттрибут class с class1 на class2
2
  • Вообщем хочу сделать как в файловом менеджере при первом клике на папку в сайдбаре показались свойства из БД а при втором клике она открывалась! 12 янв 2016 в 10:22
  • Ну ок, в обработчике клика для первого класса выполняешь код для смены класса и отображения дополнительной инфы, а в обработчика для второго класса открываешь свою папку, я так и написал
    – P. Ilyin
    12 янв 2016 в 10:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.