设置CSS属性与js点击事件处理程序

我试图创建一个onclick事件，它将显示/隐藏数组的元素，但我正在努力与下面的showSubTabGroup()函数。

旁注:最终我想让这个onmouseenter和onmouseleave，而不是"点击"，如你所见。

我希望能够点击一个div并在下面显示后续的div，因为你可能期望从导航功能。

控制台没有返回任何错误，但是'click'功能似乎alert("CLICKED")正确。

任何帮助都将是非常感激的。

问题:

Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
  this.tab[tabIndex].addEventListener('click', function () {
    alert("CLICKED");//Testing 'click' call
    for (var i = subTabIndex; i < this.subTabGroup; i++) {
      this.subTab[i].style.display = "";
    }
  });
}

    function Tab (subTabGroup) {
      this.tab = document.getElementsByClassName("tab");
      this.subTab = document.getElementsByClassName("sub-tab");
      this.subTabGroup = subTabGroup;
    }
    
    Tab.prototype.hideSubTabs = function () {
      for (var i = 0; i < this.subTab.length; i++) {
        this.subTab[i].style.display = "none";
      }
    }
    
    Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
      this.tab[tabIndex].addEventListener('click', function () {
        for (var i = subTabIndex; i < this.subTabGroup; i++) {
          this.subTab[i].style.display = "";
        }
      });
    }
    
    var tab = new Tab(3);
    tab.hideSubTabs();
    tab.showSubTabGroup(0,0);

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Responsive Nav</title>
    </head>
    <body>
      <!-- JQuery CDN -->
      <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    
      <div class="container">
        <div class="tab">
          <p>TAB</p>
        </div>
        <div class="sub-tab">
          <p>SUBTAB</p>
        </div>
        <div class="sub-tab">
          <p>SUBTAB</p>
        </div>
        <div class="sub-tab">
          <p>SUBTAB</p>
        </div>
      </div>
    
      <div class="container">
        <div class="tab">
          <p>TAB</p>
        </div>
        <div class="sub-tab">
          <p>SUBTAB</p>
        </div>
        <div class="sub-tab">
          <p>SUBTAB</p>
        </div>
        <div class="sub-tab">
          <p>SUBTAB</p>
        </div>
      </div>
    
      <div class="container">
        <div class="tab">
          <p>TAB</p>
        </div>
        <div>
          <div class="sub-tab">
            <p>SUBTAB</p>
          </div>
          <div class="sub-tab">
            <p>SUBTAB</p>
          </div>
          <div class="sub-tab">
            <p>SUBTAB</p>
          </div>
        </div>
      </div>
    
      <script type="text/javascript" src="tab.js"></script>
      <script type="text/javascript" src="tabEvents.js"></script>
    
    </body>
    </html>

什么是this内部点击的问题。它不是您的选项卡代码，而是对您单击的元素的引用。你需要使用bind

来改变它

Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
  this.tab[tabIndex].addEventListener('click', (function () { 
    for (var i = subTabIndex; i < this.subTabGroup; i++) {
      this.subTab[i].style.display = "";
    }
  }).bind(this));
}

当我阅读你的帖子时，我认为hideSubTabs()工作正常。在这种情况下，我建议使用showSubTabGroup():

this.subTab[i].style.display = "initial";

代替

this.subTab[i].style.display = "";

"initial"将设置为其默认值，例如div为"block" span为"inline"

我看到你还包括jQuery。如果我可能会问，为什么不使用jQuery函数，它可以用更少的代码做同样的事情:

$('.tab').on('click',function() {
    $(this).closest('.container').find('.sub-tab').toggle()
})
$('.tab').click();
$('.tab')[0].click();

相关内容

最新更新

热门标签：