Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.03.2016, 12:57
Аватар для borus
Кандидат Javascript-наук
Отправить личное сообщение для borus Посмотреть профиль Найти все сообщения от borus
 
Регистрация: 07.12.2012
Сообщений: 147

Как изменить обработчик?
Здравствуйте!

На странице слева есть меню каталога с плюсами у категорий, в которых есть подкатегории. По умолчанию срабатывает обработчик, как понимаю, mootools, который раскрывает подкатегории кликнутой категории, например самой верхней "Оловянный мир"

Скажите, пожалуйста, как на jquery изменить реагирование таким образом, чтобы клик по буквам названия категории производил клик на лежащую в li ссылку <a>, а клик на картинку с плюсом, заданную в качестве background-image выше упомянутой <a>, приводил к дефолтному раскрытию подкатегорий?
Ответить с цитированием
  #2 (permalink)  
Старый 03.03.2016, 13:49
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

borus,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <style>
        ul{
            list-style-type : none;
        }
        ul li span{
            cursor : pointer;
            color : #444;
        }
    </style>
    <script>
        $(function () {
            $('ul li ul').hide();
            $("ul > li > span").click(function () {
                $(this).nextAll('ul').slideToggle();
            });
        })
    </script>
    <ul>
        <li><span>+</span> <a href="http://javascript.ru">Javascript.ru</a>
        <ul>
            <li><a href="http://google.com">Google.com</a></li>
            <li><a href="http://yandex.ru">Yandex.ru</a></li>
        </ul>
        </li>
    </ul>


осталось заменить "+" на background-image
Ответить с цитированием
  #3 (permalink)  
Старый 03.03.2016, 14:57
Аватар для borus
Кандидат Javascript-наук
Отправить личное сообщение для borus Посмотреть профиль Найти все сообщения от borus
 
Регистрация: 07.12.2012
Сообщений: 147

Сообщение от destus Посмотреть сообщение
borus,
осталось заменить "+" на background-image
Благодарю!

А можно как-то обойтись без изменений в html-разметке? У меня плюсы как вы видите часть той же ссылки, фоновые картинки, помещаемые в left-padding. Например можно ли как-то проверить, был ли клик в left-padding <a> или нет?

Последний раз редактировалось borus, 03.03.2016 в 15:12.
Ответить с цитированием
  #4 (permalink)  
Старый 03.03.2016, 15:15
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

borus,
надо screenX проверять объекта события
Ответить с цитированием
  #5 (permalink)  
Старый 03.03.2016, 15:27
Аватар для borus
Кандидат Javascript-наук
Отправить личное сообщение для borus Посмотреть профиль Найти все сообщения от borus
 
Регистрация: 07.12.2012
Сообщений: 147

Сообщение от destus Посмотреть сообщение
borus,
надо screenX проверять объекта события
так там будет дана координата Х относительно начала экрана, причем как я понял даже не относительно окна браузера, а именно рабочего экрана...

а... то есть потом надо будет вычесть координату Х начала ссылки и если разница <= left-padding то делаем все что надо?

А как получить х координату dom элемента относительно той же опорной точки, что использует screenX?

Последний раз редактировалось borus, 03.03.2016 в 15:30.
Ответить с цитированием
  #6 (permalink)  
Старый 03.03.2016, 15:34
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

borus,
offset().left

Что-то типо такого
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <style>
        ul{
            list-style-type: none;
        }
        ul > li > a{
            padding-left: 15px;
            background: url('http://www.antilopagold.su/images/stories/customfilters/minus-plus-orange_closed.png') no-repeat left center;
        }
        div{
            width : 50%;
            margin : 300px;
        }
    </style>
    <script>
        $(function () {
            $('ul li ul').hide();
            $("ul > li").click(function (e) {
               if ( ($(this).offset().left + 13) > e.screenX)
                {
                    $(this).children('ul').slideToggle();
                    e.preventDefault();
                }                   
                    
            });
        })
    </script>
    <div>
        <ul id="main">
            <li>
                <a href="http://javascript.ru">Javascript.ru</a>
                <ul>
                    <li><a href="http://google.com">Google.com</a></li>
                    <li><a href="http://yandex.ru">Yandex.ru</a></li>
                </ul>
            </li>
        </ul>
    </div>

Последний раз редактировалось destus, 03.03.2016 в 15:41.
Ответить с цитированием
  #7 (permalink)  
Старый 03.03.2016, 17:42
Аватар для borus
Кандидат Javascript-наук
Отправить личное сообщение для borus Посмотреть профиль Найти все сообщения от borus
 
Регистрация: 07.12.2012
Сообщений: 147

Благодарю.
Пробую теперь реализовать скрипт шаг за шагом.
Обновил скрипт на упомянутой странице - в заголовок /templates/za-mag/js/custom.js я добавил код:
$("ul.cf_filters_list li").click(function (e) {
		e.preventDefault();
	});

которым попытался отключить какое-либо схлопывание-раскрытие нажимаемых пунктов, действующее сейчас.

Скажите, почему этого не получилось добиться?

Последний раз редактировалось borus, 03.03.2016 в 17:54.
Ответить с цитированием
  #8 (permalink)  
Старый 03.03.2016, 19:05
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

borus,
$("ul.cf_filters_list li a").click(function (e) {
        e.preventDefault();
    });
Ответить с цитированием
  #9 (permalink)  
Старый 04.03.2016, 10:03
Аватар для borus
Кандидат Javascript-наук
Отправить личное сообщение для borus Посмотреть профиль Найти все сообщения от borus
 
Регистрация: 07.12.2012
Сообщений: 147

Сообщение от destus Посмотреть сообщение
borus,
$("ul.cf_filters_list li a").click(function (e) {
        e.preventDefault();
    });
и так не работает В чем причина? мутулс вроде выше чем custom.js подключается

Последний раз редактировалось borus, 04.03.2016 в 10:07.
Ответить с цитированием
  #10 (permalink)  
Старый 04.03.2016, 10:21
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

http://jdevelop.info/articles/9-deve...-with-mootools
https://learn.jquery.com/using-jquer...her-libraries/
jQuery + Mootools: noConflict
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как изменить цвет и размер шрифта в Java savas332 Серверные языки и технологии 3 09.01.2014 17:02
Как изменить ссылку в слайдере alexvost jQuery 3 13.06.2012 02:24
Как изменить адресную строку и изменить историю переходов vuler Общие вопросы Javascript 4 20.03.2012 14:14
Как снять обработчик с очередью FanAizu jQuery 0 11.02.2012 19:28