sub menu link is not working

Question

I am using a theme which is showing table of content by using this code :

            <div class="menu-panel">
            <h3>' . __('Table of Contents', 'odrin') . '</h3>
            <ul id="menu-toc" class="menu-toc is-perfect-scrollbar">';

                if( odrin_have_rows('read_the_book_chapters',  $post_id) ):

                    $item_num = 1;

                    while ( odrin_have_rows('read_the_book_chapters',  $post_id) ) : the_row();

                        $output .= '<li><a href="#item'. $item_num = 1 . '">' . odrin_get_sub_field('title',  $post_id) .'</a></li>';

                        $item_num++;

                    endwhile;

                endif;

            $output .= '</ul>

        </div>

I want the list items to have sub items, like we have sub menu in WordPress. I create a new True / False field "sub" and edited the code to look likes this

while ( odrin_have_rows('read_the_book_chapters',  $post_id) ) : the_row();

if (odrin_get_sub_field('sub')){
    $output .= '<ul">'; 
}

    $output .= '<li><a href="#item'. $item_num = 1 . '">' . odrin_get_sub_field('title',  $post_id) .'</a></li>';

if (odrin_get_sub_field('sub')){
    $output .= '</ul>';     
}

$item_num++; endwhile;

now item where field sub is checked are appearing as sub menu but when i click on this sub menu link it wouldn't work.

For reference URL is : http://test.punjabeducatorscommunity.com/

Answer 1

This Code worked for me

while ( odrin_have_rows('read_the_book_chapters',  $post_id) ) : the_row(); if (odrin_get_sub_field('sub')){
$output .= '<li><ul>'; }
$output .= '<li><a href="#item'. $item_num = 1 . '">' . odrin_get_sub_field('title',  $post_id) .'</a></li>';if (odrin_get_sub_field('sub')){
$output .= '</ul></li>';}$item_num++; endwhile;

I was missing <li> of sub menu. Meaning that <ul> of sub menu should be within <li> of parent.

Here is the structure of sub menu

<ul>
    <li>Parent Item
        <ul><li>Sub Menu Item</li></ul>
    </li>
    <li>Another Parent Item</li>
</ul>