The links in the Accordeon menu don't work. How to fix?

W

Weltmeister2016-08-10 11:43:48

JavaScript

Weltmeister, 2016-08-10 11:43:48

Hello. Installed a menu-accordion on Jquery on the site.
As a result, links to single elements work (there is a transition on a click), but links to nested (drop-down elements) do not work. When you hover over such links, the url is visible, but there is no transition on click. As if clicks are blocked by a script.

The script itself:

<script type="text/javascript">
        $(document).ready(function () {
      $('#cssmenu li.has-sub > a').on('click', function(){
        $(this).removeAttr('href');
        var element = $(this).parent('li');
        if (element.hasClass('open')) {
          element.removeClass('open');
          element.find('li').removeClass('open');
          element.find('ul').slideUp();
        }
        else {
          element.addClass('open');
          element.children('ul').slideDown();
          element.siblings('li').children('ul').slideUp();
          element.siblings('li').removeClass('open');
          element.siblings('li').find('li').removeClass('open');
          element.siblings('li').find('ul').slideUp();
        }
      });

      $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');
        });
</script>

The code:

<!DOCTYPE>
<html>
<head>
    <title>Вертикальное accordion меню</title>
  <link rel="shortcut icon" href="/favicon.ico" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
  <style>
    .demo_container{
      margin:100px auto;
      width:300px;
    }
  </style>
    <script type="text/javascript">
        $(document).ready(function () {
      $('#cssmenu li.has-sub > a').on('click', function(){
        $(this).removeAttr('href');
        var element = $(this).parent('li');
        if (element.hasClass('open')) {
          element.removeClass('open');
          element.find('li').removeClass('open');
          element.find('ul').slideUp();
        }
        else {
          element.addClass('open');
          element.children('ul').slideDown();
          element.siblings('li').children('ul').slideUp();
          element.siblings('li').removeClass('open');
          element.siblings('li').find('li').removeClass('open');
          element.siblings('li').find('ul').slideUp();
        }
      });

      $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');
        });
    </script>
</head>
<body>

<div class="demo_container">

  <div id='cssmenu'>
    <ul>
       <li class='active'><a href='index.html'><span>Главная</span></a></li>
       <li class='has-sub'><a href='#'><span>Каталог</span></a>
        <ul>
         <li class='has-sub'><a href='#'><span>Смартфоны</span></a>
          <ul>
             <li><a href='#'><span>Samsung</span></a></li>
             <li><a href='#'><span>Sony</span></a></li>
          </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Планшеты</span></a>
          <ul>
             <li><a href='#'><span>Asus</span></a></li>
             <li><a href='#'><span>Lenovo</span></a></li>
          </ul>
         </li>
        </ul>
       </li>
       <li><a href='#'><span>О магазине</span></a></li>
       <li><a href='#'><span>Контакты</span></a></li>
    </ul>
  </div>

</div>
  
</body>
</html>

Who will tell you where the tsobaken is buried?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

D

Denis Bukreev, 2016-08-10
@denisbookreev

Line 4 - why is the link attribute removed?