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 you have read our privacy policy.

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