Jquery li selector

Question

I've got this code and I need to get work this script:

$(document).ready(function() {
  $('.toggle').hide();
  $('li.togglelink').on('click', function(e) {
    e.preventDefault();
    var elem = $(this).next('.toggle')
    $('.toggle').not(elem).hide();
    elem.toggle();

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="main" class="horizontal">
  <li class="togglelink">Lorem ipsum
    <ul id="drop" class="toggle vertical">
      <li>První</li>
      <li>Druhý</li>
      <li>První</li>
      <li>Druhý</li>
    </ul>
  </li>
</ul>

How can I make selector for li.togglelink? Why my script doesn't work?

Another important thing: How to hide toggle if isn't togglelink or toggle hovered?

Answer 1

you need to use .find() instead of .next() because you're looking for a class inside of .togglelink. And you don't need to use e.peventDefault() (unless you plan on adding in links). You can cut down your script too:

$('.toggle').hide();
  $('li.togglelink').on('click', function (e) {
  var elem = $(this).find('.toggle').slideToggle();
});

$(document).ready(function() {
  $('.toggle').hide();
  $('li.togglelink').on('click', function(e) {
    var elem = $(this).find('.toggle').slideToggle();

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="main" class="horizontal">
  <li class="togglelink">Lorem ipsum
    <ul id="drop" class="toggle vertical">
      <li>První</li>
      <li>Druhý</li>
      <li>První</li>
      <li>Druhý</li>
    </ul>
  </li>
</ul>

You could also set .toggle to display: none in your CSS instead of calling $('.toggle').hide(); on page load:

$('li.togglelink').on('click', function(e) {
  $(this).find('.toggle').slideToggle();
});

.toggle {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="main" class="horizontal">
  <li class="togglelink">Lorem ipsum
    <ul id="drop" class="toggle vertical">
      <li>První</li>
      <li>Druhý</li>
      <li>První</li>
      <li>Druhý</li>
    </ul>
  </li>
</ul>

Answer 2

Be careful with your markup, normally you would use a link inside the <li> element or you will have to customize the cursor via CSS. This is how I would do it:

$(function() {
  $('.toggle').hide();

  $('#togglelink > a').click(function(e) {
    $(this).parent().find('.toggle').slideToggle();
    return false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="main" class="horizontal">
  <li id="togglelink">
    <a href="#">Lorem ipsum</a>
    <ul id="drop" class="toggle vertical">
      <li>První</li>
      <li>Druhý</li>
      <li>První</li>
      <li>Druhý</li>
    </ul>
  </li>
</ul>