cadijob,
или даже так, если обработчик выше например в li
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>title</title>
<link href="https://fonts.googleapis.com/css?family=Roboto&subset=cyrillic" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
$("#open-close").show();
$("#block-links").hide();
$("#open-close").click(function(a) {
a.preventDefault();
$("#block-links").slideToggle(400)
});
$(".canDisable").on("click", function(a) {
if ($("#block-links").is(":visible")) {a.preventDefault(); a.stopPropagation();
$(this).parent().css( "transform", "scale(0.85)" );
}
})
$("li").on("click", function(a) {alert("переход");})
});
</script>
</head>
<body>
<div class="wrapper" id="scroll">
<div class="container">
<div class="botHeader">
<a href="#" id="open-close">
<div class="talkBtn">
<p>Кнопка которая октрывает форму</p>
</div>
</a>
</div>
<div class="borderShadow"></div>
<div class="talk" id="block-links">
<form action="">
<input type="text" name="textTitle" placeholder="Тема сообщения">
<textarea name="textarea" rows="8" cols="80" placeholder="Текст"></textarea>
</form>
</div>
<div class="tags">
<ul>
<li><a href="" class="canDisable">Тег 1</a></li>
<li><a href="" class="canDisable">Тег 2</a></li>
<li><a href="" class="canDisable">Тег 3</a></li>
<li><a href="" class="canDisable">Тег 4</a></li>
<li><a href="" class="canDisable">Тег 4</a></li>
<li><a href="" class="canDisable">Тег 5</a></li>
<li><a href="" class="canDisable">Тег 6</a></li>
<li><a href="" class="canDisable">Тег 7</a></li>
<li><a href="" class="canDisable">Тег 8</a></li>
<li><a href="" class="canDisable">Тег 9</a></li>
<li><a href="" class="canDisable">Тег 10</a></li>
<li><a href="" class="canDisable">Тег 11</a></li>
<li><a href="" class="canDisable">Тег 12</a></li>
</ul>
</div>
<div class="borderShadow"></div>
<div class="posts">
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
|
:( :( :(
Не туда вставил его... Извините. Да видно, что он намного красивее моих костылей, но с моими я могу сделать так - $(this).css( "transform", "scale(0.85)" );то есть применить это свойство к li с классом tags. А вашем варианте как такое сделать? Всё. Вижу |
$("li").on("click", function(a)
{
alert("переход4");
})
Не принтится alert. |
Цитата:
|
Не выводится сообщение(alert)
|
Цитата:
$(".canDisable").on("click", function(a) {
if ($("#block-links").is(":visible")) {a.preventDefault(); a.stopPropagation();
$(this).parent().css( "transform", "scale(0.85)" );
}
})
|
Цитата:
|
$(".canDisable").on("click", function(a) {
if ($("#block-links").is(":visible")) a.preventDefault();
console.log($(this).text());
$(this).css( "transform", "scale(0.85)" );
})
});
Как сделать, что бы стиль применялся не к ссылке с классом canDisable, а к .tags li? К тому li по которому пользователь кликнул? |
cadijob,
когда форма открыта, li трансформируется (новый вариант) |
Цитата:
|
Цитата:
|
Цитата:
|
А из-за этого кода, якоря не перестанут работать? А то даже обычные, без jQ, не работают.
|
Цитата:
a.stopPropagation(); - останавливает всплытие события, то есть обработчики выше его не получат. Что у вас при этом на странице в данной ситуации, разбираться вам. |
Точно. Убрал a.preventDefault(); и якоря без jQ заработали, а с ним нет.
Вот так смотрю offset :
var id = $(this).attr('href');
//узнаем высоту от начала страницы до блока на который ссылается якорь
top = $(id).offset().top;
console.log($(top));
И длина(lenght) всегда равна единице. В чём может быть проблема? В уроке -
$(document).ready(function(){
$("#menu").on("click","a", function (event) {
//отменяем стандартную обработку нажатия по ссылке
event.preventDefault();
//забираем идентификатор бока с атрибута href
var id = $(this).attr('href'),
//узнаем высоту от начала страницы до блока на который ссылается якорь
top = $(id).offset().top;
//анимируем переход на расстояние - top за 1500 мс
$('body,html').animate({scrollTop: top}, 1500);
});
});
Но что с preventDefault();, что без, ничего не меняется. |
Цитата:
|
Цитата:
|
Если это ID, тогда Ок. А что за проблема то, чего lenght (проверка существования объекта), и что не меняется, прокрутка до его позиции?
|
cadijob,
я просмотрел кратко 50 предыдущих серий этого сериала, в которых рони вам как бы уже объяснил все от и до. Включая и то, то если щелчок по ссылке, у которой в href будет не обязательно url, а хеш, то при отсутствии preventDefault() произойдет переход внутри страницы, то есть к блоку с ID указанному в href. Он разместится в максимально возможное положение вверху. Вопрос - какое смещение при этом будет возвращать $(этот смещенный вверх объект).offset().top? Если какие-то проблемы после применения preventDefault() (какие не понять), то кто вас заставляет использовать для этого тег А? Щелкать можно по чему угодно. Заменить такие ссылки (без uri) например на SPAN, используйте их. В чем проблема то? |
Цитата:
top = $(id).offset().top; console.log($(top)); = lenght: 1;(в массиве window) как я понял по комментарием к коду, lenght(которая в переменной top) это расстояние до якоря? |
Цитата:
top = $("#TalkAnchor").offset().top;
Ничего не работает. |
Цитата:
Я не буду режиссером продолжающим данный сериал, вам уже один рассказал весь его сценарий. :) Что еще надо для понимания, думать и править недопустимое в нем. Думайте. |
Цитата:
|
Вся проблема была в кастомном скорлле и немного в css.
|
Убрал у wraper position:fixed и всё заработало.
|
Цитата:
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 11:21. |