Good day. There is some markup and a script that expands and collapses the content. So, you need to expand or collapse when you click only on the parent menu items, and the internal was a link, tell me what to fix in the script.

<div class="view-source col-xs-6"> <a href="#" class="p1">ПУНКТ МЕНЮ РОДИТЕЛЬСКИЙ <span>+</span></a> <div class="hides"> <ul> <li><a href="/">МЕНЮ</a></li> <li><a href="/">МЕНЮ</a></li> <li><a href="/">МЕНЮ</a></li> <li><a href="/">МЕНЮ</a></li> <li><a href="/">МЕНЮ</a></li> </ul> </div> </div> <script> $(function(){ $('.view-source .hides').hide(); $a = $('.view-source a'); $a.on('click', function(event) { event.preventDefault(); $a.not(this).next().slideUp(500); $(this).next().slideToggle(500); }); }); </script>
  • `$ ('. p1'). on ('click',` - splash58

1 answer 1

To do this, just change the selector:

 $a = $('.view-source a');

On

 $a = $('.view-source > a');

Demo:

 $(function() { $('.view-source .hides').hide(); $a = $('.view-source > a'); $a.on('click', function(event) { event.preventDefault(); $a.not(this).next().slideUp(500); $(this).next().slideToggle(500); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="view-source col-xs-6"> <a href="#" class="p1">ПУНКТ МЕНЮ РОДИТЕЛЬСКИЙ <span>+</span></a> <div class="hides"> <ul> <li><a href="/">МЕНЮ</a> </li> <li><a href="/">МЕНЮ</a> </li> <li><a href="/">МЕНЮ</a> </li> <li><a href="/">МЕНЮ</a> </li> <li><a href="/">МЕНЮ</a> </li> </ul> </div> </div>

  • Thank you very much! - Batyabest