Как сверстать такое раскрывающее меню?

Question

[Sergey750il]

Доброго времени суток. Сверстал меню, но проблема в том, что его раскрытие происходит даже когда нажимаю radio button или крестик.

<ul id="my-menu" class="sample-menu">
                        <li>
                            <a href="#0">Companies</a>
                            <ul>
                                <li>
                                    <a href="#0">Comp name</a>
                                    <ul>
                                        <li>
                                            <a href="#0">Ivanov Ivan Ivanovich</a>

                                        </li>
                                        <li>
                                            <a href="#0">Ivanov Ivan Ivanovich</a>
                                        </li>
                                        <li>
                                            <a href="#0">Ivanov Ivan Ivanovich</a>
                                        </li>
                                    </ul>
                                </li>
 <li>
                                    <a href="#0">Comp name</a>
                                    <ul>
                                        <li>
                                            <a href="#0">Ivanov Ivan Ivanovich</a>

                                        </li>
                                        <li>
                                            <a href="#0">Ivanov Ivan Ivanovich</a>
                                        </li>
                                        <li>
                                            <a href="#0">Ivanov Ivan Ivanovich</a>
                                        </li>
                                    </ul>
                                </li> <li>
                                    <a href="#0">Comp name</a>
                                    <ul>
                                        <li>
                                            <a href="#0">Ivanov Ivan Ivanovich</a>

                                        </li>
                                        <li>
                                            <a href="#0">Ivanov Ivan Ivanovich</a>
                                        </li>
                                        <li>
                                            <a href="#0">Ivanov Ivan Ivanovich</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                       
                       
                   
                    </ul>

$('ul#my-menu ul').each(function(i) { // Check each submenu:
       if ($.cookie('submenuMark-' + i)) { // If index of submenu is marked in cookies:
         $(this).show().prev().removeClass('collapsed').addClass('expanded'); // Show it (add apropriate classes)
       } else {
         $(this).hide().prev().removeClass('expanded').addClass('collapsed'); // Hide it
       }
       $(this).prev().addClass('collapsible').click(function() { // Attach an event listener
         var this_i = $('ul#my-menu ul').index($(this).next()); // The index of the submenu of the clicked link
         if ($(this).next().css('display') == 'none') {
           $(this).next().slideDown(200, function() { // Show submenu:
             $(this).prev().removeClass('collapsed').addClass('expanded');
             cookieSet(this_i);
           });
         } else {
           $(this).next().slideUp(200, function() { // Hide submenu:
             $(this).prev().removeClass('expanded').addClass('collapsed');
             cookieDel(this_i);
             $(this).find('ul').each(function() {
               $(this).hide(0, cookieDel($('ul#my-menu ul').index($(this)))).prev().removeClass('expanded').addClass('collapsed');
             });
           });
         }
         return false; // Prohibit the browser to follow the link address
       });
     });
   function cookieSet(index) {
     $.cookie('submenuMark-' + index, 'opened', {
       expires: null,
       path: '/'
     }); // Set mark to cookie (submenu is shown):
   }

   function cookieDel(index) {
     $.cookie('submenuMark-' + index, null, {
       expires: null,
       path: '/'
     }); // Delete mark from cookie (submenu is hidden):
   }

Comments

[Hyubert]

вешай собития ховер и клик на разние блоки

[Sergey750il]

Hyubert: причем здесь ховер?

[Школьник.]

Для начала занесите своё творение сюда - jsfiddle.net

[Hyubert]

Sergey750il: ти написал

Сверстал меню, но проблема в том, что его раскрытие происходит даже когда нажимаю radio button или крестик.

Что значит проблема в верстке, я и говорю у тебя собитие show/hide(откривает/закривает), стоит на всем контейнере, и мешает работе radio button, задай каждому отдельний контейнер который подели на 2 части , первая на откритие/закритие, а вторая на radio, что б они не мешали друг другу, а чтоб убрать визуальние различие , ховер давай контейнеру.

[Sergey750il]

Hyubert: Не понятно как в этой строке переделать на что что бы this выбралась ссылка.

[Sergey750il]

Hyubert: $(this).prev().addClass('collapsible').click(function() { // Attach an event listener

[Hyubert]

Sergey750il: скинь проект на codepen.io или https://jsfiddle.net/ , чтоб било и CSS

[Hyubert]

Sergey750il: чесно, не силен в Jquery, больше люблю нативный JS, но здесь видно что this указивает на $('ul#my-menu ul'), по этому лучше будет, поменять разметку HTML ? так как я написал выше, это легче

[Sergey750il]

Hyubert: https://jsfiddle.net/sergey750il/vmzvsy8a/

[Hyubert]

Sergey750il: в этом варианте все работает как нада

[Sergey750il]

Hyubert: ну это да, а когда добавляю в li radio button то и по radio раскрывает список

[Sergey750il]

Hyubert: https://jsfiddle.net/sergey750il/en9g4ex9/

Answer 1

[Максим Люмен]

https://jsfiddle.net/uddou398/ я особо не старался , ну вообще вот такое ?

Comments

[Sergey750il]

Только, вопрос в том как подпункты Ratmir Alexandrov лучше сделать ? нежели задавать жестко высоту.