Как изменить обработчик?
 

Здравствуйте!

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

Скажите, пожалуйста, как на jquery изменить реагирование таким образом, чтобы клик по буквам названия категории производил клик на лежащую в li ссылку <a>, а клик на картинку с плюсом, заданную в качестве background-image выше упомянутой <a>, приводил к дефолтному раскрытию подкатегорий?

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

Благодарю!

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

borus,
надо screenX проверять объекта события

так там будет дана координата Х относительно начала экрана, причем как я понял даже не относительно окна браузера, а именно рабочего экрана...

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

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

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>

Благодарю.
Пробую теперь реализовать скрипт шаг за шагом.
Обновил скрипт на упомянутой странице - в заголовок /templates/za-mag/js/custom.js я добавил код:

$("ul.cf_filters_list li").click(function (e) {
		e.preventDefault();
	});

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

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

borus,

$("ul.cf_filters_list li a").click(function (e) {
        e.preventDefault();
    });

и так не работает :) В чем причина? мутулс вроде выше чем custom.js подключается

http://jdevelop.info/articles/9-deve...-with-mootools
https://learn.jquery.com/using-jquer...her-libraries/
http://javascript.ru/forum/jquery/14...oconflict.html