Question

我想改进这个脚本（仅限RAW JAVASCRIPT）。它是一个经典的显示/隐藏脚本（带有onclick和类）。但是当我显示div（.mini-list）时，隐藏它的唯一方法就是单击前一个div（＆＃34; Show me ya moves＆＃34;）。如何制作一个事件监听器：当我点击外面的.mini-list时，如果它打开了，它就会把它设为div。它就像每个模态一样：如果我们点击外面就关闭。

我测试了很多东西，但都失败了。

＆＃13;

function toogleClass(div, myclass) {
  var regex = new RegExp('\\b' + myclass + '\\b');
  var hasOne = div.className.match(regex);
  myclass = myclass.replace(/\s+/g, '');
  if (hasOne)
    div.className = div.className.replace(regex, '');
  else
    div.className = div.className + myclass;
}

＆＃13;

.mini-menu {cursor:pointer;}
.mini-show {}
.mini-list {display:none}
.mini-show .mini-list {display:block}

＆＃13;

<div class="mini-menu " onclick="toogleClass(this, 'mini-show')">Show me ya moves !
<div class="mini-list">Hi !</div>
</div>

＆＃13;

Answer 1

WebBrowser webbrowser = new WebBrowser();
webbrowser.DocumentCompleted += (s1, e1) => { tabpage.Text = webbrowser.DocumentTitle; };

Answer 2

您可以将事件处理程序附加到文档，并在用户点击mini-menu之外时关闭div。

＆＃13;

function toggleClass() {
  event.stopPropagation();
  let div = document.getElementById('greeting');
  if (div.classList.contains('mini-list')) {
        div.classList.add('mini-show');
        div.classList.remove('mini-list');
    } else {
       div.classList.add('mini-list');
       div.classList.remove('mini-show');
    }
}

function closeGreeting() {
  let div = document.getElementById('greeting');
  div.classList.add('mini-list');
  div.classList.remove('mini-show');
}

document.getElementsByClassName('mini-menu')[0].addEventListener('click', toggleClass, false);
document.addEventListener('click',closeGreeting);

＆＃13;

.mini-menu {cursor:pointer;}
.mini-show {display:block}
.mini-list {display:none}

＆＃13;

<div class="mini-menu">Show me ya moves !
  <div id='greeting' class="mini-list">Hi !</div>
</div>

＆＃13;

在

2 个答案: