JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<li data-username="sip:[email protected]" class="contact-item closed">
          <ul class="actions"> <!-- { -->

              <li>
                <button role="new-call" class="call-action">Call</button>
              </li>

            <li class="act-options-other dp_none">
              <ul> 
                  <li>
                    <button role="new-message" class="sms-action">SMS</button>
                </li>
                <li> 
                  <button role="new-chat" class="chat-action">Chat</button> 
                </li>
              </ul>
            </li>

              <li> 
              <button class="show-act-options">ν</button>
              </li>

            </ul>  <!-- } -->
      </li>

CSS

.dp_none{
    display: none;
}

JavaScript

var d_block = false;

$('.show-act-options').on(
    'click', function (event) {
         $(event.target).parents('.actions').children('.act-options-other').css('display','block');
         d_block = true;
    }
);



$('body').click(function(event) {
    if(d_block === true){
        alert('lol');
        $('act-options-other').css('display','none');
    };
});