如果单击类，则执行此操作，否则执行此操作？

Question

我有一个打开下拉菜单的按钮。单击某个选项或关闭菜单后，下拉选项就会消失。

我需要尝试建立太不同的功能，一个是如果单击菜单项，另一个是如果未单击菜单项（即屏幕的不同部分）。

我尝试通过 - 如果类对象包含“.menubtns”执行此操作..否则....

// Close the dropdown menu if the user clicks outside of it

window.onclick = function(event) {

  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");

    var i;

    for (i = 0; i < dropdowns.length; i++) {

      var openDropdown = dropdowns[i];

      /// here is where the behaviour needs to be added //////////

      if (openDropdown.classList.contains('show') &&

        ($(this.target).hasClass('menubtns'))) {

        openDropdown.classList.remove('show');

        console.log('you have clicked an option');

      } else {

        console.log('not clicked on an option')

        openDropdown.classList.remove('show');

        mainpageaccessibility();

      }

    }

  }

这样我就可以在弹出模式中设置选项卡顺序。目前，它打开模式，但也运行“mainpageaccessibility();” 然后删除所有 taborders。

任何帮助将不胜感激！

Answer 1

我无法测试这个，但看来你在应该使用“事件”的地方使用了“这个”“this”指的是窗口对象。// Close the dropdown menu if the user clicks outside of itwindow.onclick = function(event) {&nbsp; &nbsp; if (!event.target.matches('.dropbtn')) {&nbsp; &nbsp; &nbsp; &nbsp; var dropdowns = document.getElementsByClassName("dropdown-content");&nbsp; &nbsp; &nbsp; &nbsp; var i;&nbsp; &nbsp; &nbsp; &nbsp; for (i = 0; i < dropdowns.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var openDropdown = dropdowns[i];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /// here is where the behaviour needs to be added //////////&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (openDropdown.classList.contains('show') &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ($(event.target).hasClass('menubtns'))) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; openDropdown.classList.remove('show');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('you have clicked an option');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('not clicked on an option')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; openDropdown.classList.remove('show');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mainpageaccessibility();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}

Answer 2

我无法测试这个，但看来你在应该使用“事件”的地方使用了“这个”“this”指的是窗口对象。// Close the dropdown menu if the user clicks outside of itwindow.onclick = function(event) {&nbsp; &nbsp; if (!event.target.matches('.dropbtn')) {&nbsp; &nbsp; &nbsp; &nbsp; var dropdowns = document.getElementsByClassName("dropdown-content");&nbsp; &nbsp; &nbsp; &nbsp; var i;&nbsp; &nbsp; &nbsp; &nbsp; for (i = 0; i < dropdowns.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var openDropdown = dropdowns[i];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /// here is where the behaviour needs to be added //////////&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (openDropdown.classList.contains('show') &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ($(event.target).hasClass('menubtns'))) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; openDropdown.classList.remove('show');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('you have clicked an option');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('not clicked on an option')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; openDropdown.classList.remove('show');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mainpageaccessibility();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}