Some features about easy-toggle-state

[ionurboz]

I achieved the result I wanted to say by adding 4 different points. I mark it below.

Thus, if we add the "data-toggle-childs" attribute to a trigger element containing "data-target-outside", the bottom elements of the trigger will not play an active role in both closing and opening. Especially the "mouseover" event caused great problems when you hover the mouse between the child and it parents. In this way, i have solved this.

In fact, I have found and corrected a shortcoming in coding on this occasion. You check the line going to "data-toggle-state" and block the "data-toggle-outside" feature. But in a "dropdown menu", users do not want the menu to close when they return cursor to the trigger. (All this I say to the ":hover" action)

This is exactly that part: if(event.relatedTarget && event.relatedTarget.closest("[" + TARGET_STATE + '="true"]'))return;

Places I've added

Specified as "// Added"

  var ARROWS = dataset("arrows"),
      CHECKED = "aria-checked",
...
...
      MODAL = dataset("modal"),
      OUTSIDE = dataset("outside"),
      // Added
      CHILDS = dataset("childs"), 

  var documentEventHandler = function documentEventHandler(event) {
...
...
      // Added
      if (element.hasAttribute(CHILDS) && element !== eTarget && element.contains(eTarget)) 
      {
        insideTarget = true;
      }

var init = (function () {
...
...
    triggerList.forEach(function (trigger) {
      trigger.addEventListener(trigger.getAttribute(EVENT) || "click", function (event) {
        event.preventDefault();
        // Added
        if(trigger.hasAttribute(CHILDS)) 
        {
          if( event.target !== trigger && event.relatedTarget === trigger || event.target === trigger && event.relatedTarget && trigger.contains(event.relatedTarget) )return;
        }
        // Added
        if(event.relatedTarget && event.relatedTarget.closest("[" + TARGET_STATE + '="true"]'))return;

<section>
    <div id="el-1" data-toggle-class="active" data-toggle-outside data-toggle-childs>
        CLICK ME   ------------------------------> Scenario 1
        <p>CLICK ME</p>   ---------------> Scenario 2
    </div>
    <span>OUTSIDE CLICK ME</span> --> Scenario 3
<section>

If there is a useful point, it is a great pleasure for me. Good luck with.

[Twikito]

Hi @ionurboz!
Thanks for taking time to add these comments. Let me check this.

[Twikito]

Well it seems it's more a dom structure issue than a missing feature.
In my opinion, if you really want to use this library, you probably shound rethink your structure.