menu with Jquery tabs

Question

I have the following menu it is vertical what I want to do and when I click on the link with the class j_open a ul with the class j_open_ul have a display block using the effect . toggle the problem and that when I click on one it opens to two ul with the class j_open_ul what I want and when I click on one it open the corresponding ul and close the other open .

<script type="text/javascript">
                $('.j_open').on('click', function(e) {
                   e.preventDefault();
                   $(this).closest('ul').find('.j_open_ul').slideToggle('slow');
                });
</script>

<li class="dashboard_nav_menu_li">
    <a class= j_open">teste</a>
            <ul class="dashboard_nav_menu_sub j_open_ul">
                <li class="dashboard_nav_menu_sub_li"><a href="#">Link 1</a></li>
                <li class="dashboard_nav_menu_sub_li"><a href="#">Link 2</a></li>
                <li class="dashboard_nav_menu_sub_li"><a href="#">Link 3</a></li>
                <li class="dashboard_nav_menu_sub_li"><a href="#">Link 4</a></li>
            </ul>
</li>

<li class="dashboard_nav_menu_li">
    <a class= j_open">teste</a>
            <ul class="dashboard_nav_menu_sub j_open_ul">
                <li class="dashboard_nav_menu_sub_li"><a href="#">Link 5</a></li>
                <li class="dashboard_nav_menu_sub_li"><a href="#">Link 6</a></li>
                <li class="dashboard_nav_menu_sub_li"><a href="#">Link 7</a></li>
                <li class="dashboard_nav_menu_sub_li"><a href="#">Link 8</a></li>
            </ul>
</li>

Answer 1

You could not reach the expected result due to picking the wrong element in the method Closest() Instead of taking the tag ul and do the find(), have to catch the tag li:

$('.j_open').on('click', function() {
  $(this).closest('li').find('.j_open_ul').slideToggle('slow');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="dashboard_nav_menu_li">
  <a href="#" class="j_open ">teste</a>
  <ul class="dashboard_nav_menu_sub j_open_ul ">
    <li class="dashboard_nav_menu_sub_li "><a href="# ">Link 1</a></li>
    <li class="dashboard_nav_menu_sub_li "><a href="# ">Link 2</a></li>
    <li class="dashboard_nav_menu_sub_li "><a href="# ">Link 3</a></li>
    <li class="dashboard_nav_menu_sub_li "><a href="# ">Link 4</a></li>
  </ul>
</li>

<li class="dashboard_nav_menu_li ">
  <a href="#" class="j_open">teste</a>
  <ul class="dashboard_nav_menu_sub j_open_ul">
    <li class="dashboard_nav_menu_sub_li"><a href="#">Link 5</a></li>
    <li class="dashboard_nav_menu_sub_li"><a href="#">Link 6</a></li>
    <li class="dashboard_nav_menu_sub_li"><a href="#">Link 7</a></li>
    <li class="dashboard_nav_menu_sub_li"><a href="#">Link 8</a></li>
  </ul>
</li>

OBS: Also adjust your HTML, because the tag class a is missing the " at the beginning.

And I think this e. preventDefault() should not exist there.

Now if you want to close one by clicking the other:

$('.j_open').closest('li').find('.j_open_ul').hide();

$('.j_open:eq(1)').on('click', function() {
  $(this).closest('li').find('.j_open_ul').slideDown('slow');
  $('.j_open').not(this).closest('li').find('.j_open_ul').slideUp('slow');
});

$('.j_open:eq(0)').on('click', function() {
  $(this).closest('li').find('.j_open_ul').slideDown('slow');
  $('.j_open').not(this).closest('li').find('.j_open_ul').slideUp('slow');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li class="dashboard_nav_menu_li">
  <a href="#" class="j_open ">teste</a>
  <ul class="dashboard_nav_menu_sub j_open_ul ">
    <li class="dashboard_nav_menu_sub_li "><a href="# ">Link 1</a></li>
    <li class="dashboard_nav_menu_sub_li "><a href="# ">Link 2</a></li>
    <li class="dashboard_nav_menu_sub_li "><a href="# ">Link 3</a></li>
    <li class="dashboard_nav_menu_sub_li "><a href="# ">Link 4</a></li>
  </ul>
</li>

<li class="dashboard_nav_menu_li ">
  <a href="#" class="j_open">teste</a>
  <ul class="dashboard_nav_menu_sub j_open_ul">
    <li class="dashboard_nav_menu_sub_li"><a href="#">Link 5</a></li>
    <li class="dashboard_nav_menu_sub_li"><a href="#">Link 6</a></li>
    <li class="dashboard_nav_menu_sub_li"><a href="#">Link 7</a></li>
    <li class="dashboard_nav_menu_sub_li"><a href="#">Link 8</a></li>
  </ul>
</li>