Merhaba, mobil için bir menü yapmaya çalışıyorum. Link genişliğini 100px kabul edelim. Alt menüsü olan linkleri gneişliğini de 75px kabul edelim. Kalan 25px yerde de svg var ancak bu linkin içerisinde ve margin-right: -25px ile dışarı alınmış şekilde.
Şimdi HTML kodlarını göstereyim:

<ul class="menu">
    <li class="menu-item menu-item-has-children sub-menu-1">
        <a href="#">Test 1
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="1em" height="1em"
                viewBox="0 0 448 512">
                <path
                    d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z">
                </path>
            </svg>
        </a>
        <ul class="sub-menu">
            <li class="menu-item">
                <a href="#">Test 1</a>
            </li>
            <li class="menu-item menu-item-has-children sub-menu-2 sub-menu-open">
                <a href="#">Test 2
                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="1em" height="1em"
                        viewBox="0 0 448 512">
                        <path
                            d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z">
                        </path>
                    </svg>
                </a>
                <ul class="sub-menu">
                    <li class="menu-item">
                        <a href="#">Test 1</a>
                    </li>
                    <li class="menu-item">
                        <a href="#">Test 2</a>
                    </li>
                    <li class="menu-item">
                        <a href="#">Test 3</a>
                    </li>
                </ul>
            </li>
            <li class="menu-item">
                <a href="#">Test 3</a>
            </li>
        </ul>
    </li>
</ul>

Burada svg'ye basıldığı zaman ilk üst li elemanına sub-menu-open sınıfı eklenmesi lazım. Alt menüsü olan linklerin li elemanlarının sınıflarında sırasıyla numaralandırılmış şekilde sınıflar mevcut. Ayrıca bu svg'ye tıkladığım zaman linke gitmemesi lazım.
Bu konuda yardımcı olur musunuz, bunu jQuery ile nasıl yaparım?