JSFiddle - React, Tailwind, and code Playground

by Nishit Maheta

HTML

<div class="MyAllMenu" style='margin: 50px'>
        <div class="MyMenu">
            <a class="MyAccount">
                <span>My Settings</span>
            </a>
            <div class="submenu" style="display: none;">
                <ul class="AllMenuList">
                    <li>
                        <a href="/Default.aspx">Dashboard</a>
                    </li>
                    <li>
                        <a href="#Profile">Profile</a>
                    </li>
                    <li>
                        <a href="#settings">Settings</a>
                    </li>
                    <li>
                        <a href="#feedback">Send Feedback</a>
                    </li>
                    <li>
                        <a href="#signout">Sign Out</a>
                    </li>
                </ul>
            </div>
        </div>

    </div>

JavaScript

$(".MyAccount").click(function () {
     
            var X = $(this).attr('id');
     alert(X)
            if (X == '1') {
                $(".submenu").hide();
                $(this).attr('id', '0');
            }
            else {
                $(".submenu").show();
                $(this).attr('id', '1');
            }
        });
        //Mouseup textarea false
        
        //Textarea without editing.
        $(document).not(".myaccount",".submenu").mouseup(function () {
            $(".submenu").hide();
            $(".MyAccount").attr('id', '');
        });