Непонятки с событием click...
Значит вот этот скрипт работает без нареканий:
function selectbox() { $('.search-filter > p.search-filter__value').click(function () { var currentValue = $(this).parent().css("overflow"); if (currentValue == "hidden") { $(this).parent().css({ "overflow": "visible", "border-bottom-color": "transparent", "background-color": "#F9F9F9" }); $(this).siblings('img').css({borderRadius: "1000px", transition: ".2s", transform: "rotate(180deg)"}); } else { $(this).parent().css({ "overflow": "hidden", "border-bottom-color": "#E5E5E5", "background-color": "transparent" }); $(this).siblings("img").css({transform: "rotate(0deg)"}); } }) $('.search-filter__box > li').click(function () { $(this).parent().parent().css({ "overflow": "hidden", "border-bottom-color": "#E5E5E5", "background-color": "transparent" }); $(this).parent().siblings("img").css({transform: "rotate(0deg)"}); $(this).parent().siblings("p").text($(this).text()); }) } $(document).ready(function (){ selectbox() }); Но я решил вынести оба события click за пределы их функции (selectbox), у меня получилось следующее: function selectboxopen() { var currentValue = $(this).parent().css("overflow"); if (currentValue == "hidden") { $(this).parent().css({"overflow":"visible","border-bottom-color":"transparent","background-color":"#F9F9F9"}); $(this).siblings('img').css({borderRadius: "1000px", transition: ".2s", transform: "rotate(180deg)"}); } else { $(this).parent().css({"overflow":"hidden","border-bottom-color":"#E5E5E5","background-color":"transparent"}); $(this).siblings("img").css({transform: "rotate(0deg)"}); } } function selectboxselect() { $(this).parent().parent().css({"overflow":"hidden","border-bottom-color":"#E5E5E5","background-color":"transparent"}); $(this).parent().siblings("img").css({transform: "rotate(0deg)"}); $(this).parent().siblings("p").text($(this).text()); } $(document).ready(function (){ $('.search-filter > p.search-filter__value').click(function () { selectboxopen() }); $('.search-filter__box > li').click(function () { selectboxselect() }) }); Но он не работает (в консоли ошибок нет), я его перечитал 6 раз, уже голову сломал, КОД ТОТ-ЖЕ САМЫЙ - что с ним не так? |
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
https://getinstance.info/articles/ja...in-javascript/ |
Цитата:
Там ниже в js блоке, закомментированный код - тот который не работает |
|
Цитата:
|
kvizor34, вот смотри, так понятно будет?
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' /> <script src='https://code.jquery.com/jquery-latest.js'></script> <!-- <script src="https://code.angularjs.org/1.3.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.3.9/angular-route.js"></script> --> <style type='text/css'> .search-filter{ margin: 15px; display: block; color: #91959d; font-size: 14px; font-weight: 400; line-height: 18px; border: 1px solid #444444; height: 40px; overflow: hidden; position: relative; cursor: pointer; user-select: none; width: 300px } .search-filter__value{ color: #91959d; font-size: 14px; font-weight: 400; line-height: 40px; padding-right: 30px; padding-left: 16px; } .search-filter__box { line-height: 40px; background-color: #fff; } .search-filter__box li{ padding-right: 30px; padding-left: 16px; } .search-filter__box li:hover{ background-color: #BBBBBB; color: #fff; } </style> <script type='text/javascript'> function selectboxopen() { alert('Функция - '+this.tagName); this.alert('Это объект window!'); var currentValue = $(this).parent().css("overflow"); if (currentValue == "hidden") { $(this).parent().css({"overflow":"visible","border-bottom-color":"transparent","background-color":"#F9F9F9"}); } else { $(this).parent().css({"overflow":"hidden","border-bottom-color":"#E5E5E5","background-color":"transparent"}); } } function selectboxselect() { alert('Функция - '+this.tagName); this.alert('Это объект window!'); $(this).parent().parent().css({"overflow":"hidden","border-bottom-color":"#E5E5E5","background-color":"transparent"}); $(this).parent().siblings("p").text($(this).text()); } $(document).ready(function (){ $('.search-filter > p.search-filter__value').click(function () { alert('Обработчик - '+this.tagName); selectboxopen() }); $('.search-filter__box > li').click(function () { alert('Обработчик - '+this.tagName); selectboxselect() }) }); </script> </head> <body> <div class="search-filter"> <p class="search-filter__value">Поручения и рекомендации</p> <ul class="search-filter__box"> <li>Поручения и рекомендации</li> <li>Служебные переписки</li> <li>Распорядительные документы</li> </ul> </div> </body> </html> |
Часовой пояс GMT +3, время: 11:52. |