Javascript目標僅被點擊的元素

所以我有一個側面導航，在某些串列中有一個子選單，我試圖僅在單擊時顯示子選單。

這是HTML

<div class="sidebar">
    <ul class="nav">
        <li class="main-menu" onclick="dispDrop()"><a href="">Item 1</a>
            <ul class="sub-menu">
                <li><a href="">Sub-item 1</a></li>
                <li><a href="">Sub-item 1</a></li>
                <li><a href="">Sub-item 1</a></li>
                <li><a href="">Sub-item 1</a></li>
            </ul>
        </li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li class="main-menu" onclick="dispDrop()"><a href="">Item 4</a>
            <ul class="sub-menu">
                <li><a href="">Sub-item 1</a></li>
                <li><a href="">Sub-item 1</a></li>
                <li><a href="">Sub-item 1</a></li>
                <li><a href="">Sub-item 1</a></li>
            </ul>
        </li>
        <li><a href="">Item 5</a></li>
        <li><a href="">Item 6</a></li>
    </ul>
</div>

這是它的CSS

.nav ul {
    display: none;
    position: relative;
    padding: 0px;
}
.nav li.active ul {
    display: block;
}

這是javascript

<script type="text/javascript">
    const navItem = document.querySelector('.main-menu');

    function dispDrop() {
        navItem.classList.toggle("active");
    }
</script>

起初它作業正常，但是當我將子選單添加到另一個串列時，它開始出現故障并且不會顯示子選單。

有沒有辦法只針對單擊的物件，<li>并且只將類添加/切換到單擊的物件<li>？

uj5u.com熱心網友回復：

你可以做的是添加this到onclick="dispDrop()"

然后執行以下操作。

function dispDrop(obj) {
  obj.classList.toggle("active");
}

演示

顯示代碼片段

function dispDrop(obj) {
  obj.classList.toggle("active");
}

.nav ul {
  display: none;
  position: relative;
  padding: 0px;
}

.nav li.active ul {
  display: block;
}

<div class="sidebar">
  <ul class="nav">
    <li class="main-menu" onclick="dispDrop(this)"><a href="#">Item 1</a>
      <ul class="sub-menu">
        <li><a href="">Sub-item 1</a></li>
        <li><a href="">Sub-item 1</a></li>
        <li><a href="">Sub-item 1</a></li>
        <li><a href="">Sub-item 1</a></li>
      </ul>
    </li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li class="main-menu" onclick="dispDrop(this)"><a href="#">Item 4</a>
      <ul class="sub-menu">
        <li><a href="">Sub-item 1</a></li>
        <li><a href="">Sub-item 1</a></li>
        <li><a href="">Sub-item 1</a></li>
        <li><a href="">Sub-item 1</a></li>
      </ul>
    </li>
    <li><a href="">Item 5</a></li>
    <li><a href="">Item 6</a></li>
  </ul>
</div>

uj5u.com熱心網友回復：

下面列出了我已經確定的一些問題。

• 您設定navItem為document.querySelector('.main-menu'). 這將始終回傳具有該類名的第一個 DOM 元素。不是您需要的目標。
• 您的點擊事件將觸發錨標記的點擊事件，這將導致頁面重新加載。

我已經通過從點擊觸發的切換目標元素的類串列來解決這個問題。這將提供觸發點擊的所需目標。

e.preventDefault(); e.stopPropagation();在點擊事件內部呼叫，停止觸發錨標簽點擊事件的點擊事件。

作業小提琴

function dispDrop(e) {
  e.currentTarget.classList.toggle("active");
  e.preventDefault();
  e.stopPropagation();
}

.nav ul {
  display: none;
  position: relative;
  padding: 0px;
}

.nav li.active ul {
  display: block;
}

<div class="sidebar">
  <ul class="nav">
    <li class="main-menu" onclick="dispDrop(event)">
      <a href="">Item 1</a>
      <ul class="sub-menu">
        <li><a href="">Sub-item 11</a></li>
        <li><a href="">Sub-item 11</a></li>
        <li><a href="">Sub-item 11</a></li>
        <li><a href="">Sub-item 11</a></li>
      </ul>
    </li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li class="main-menu" onclick="dispDrop(event)">
      <a href="">Item 4</a>
      <ul class="sub-menu">
        <li><a href="">Sub-item 12</a></li>
        <li><a href="">Sub-item 12</a></li>
        <li><a href="">Sub-item 12</a></li>
        <li><a href="">Sub-item 12</a></li>
      </ul>
    </li>
    <li><a href="">Item 5</a></li>
    <li><a href="">Item 6</a></li>
  </ul>
</div>

uj5u.com熱心網友回復：

我重寫了一點你的代碼。問題發生在錨點上。你可以

1. 洗掉錨點樣式 li 標簽以獲得錨點感覺（游標：指標；等）或

2. 你添加一個#到你的href。這將避免遵循鏈接

然后我通過您的 onclick 事件傳遞當前的 clickent 物件。然后你 eventHandler 知道點擊了哪個元素。

     function dispDrop(event) {
       event.querySelector('ul').classList.toggle("hide");       
    }

.nav ul {    
    position: relative;
    padding: 0px;
}

.hide {
  display: none;
  position: relative;
}

<div class="sidebar">
    <ul class="nav">
        <li class="main-menu" onclick="dispDrop(this)">
            <a href="#">Item 1</a>
            <ul class="sub-menu hide">
                <li><a href="">Sub-item 1</a></li>
                <li><a href="">Sub-item 1</a></li>
                <li><a href="">Sub-item 1</a></li>
                <li><a href="">Sub-item 1</a></li>
            </ul>
        </li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li class="main-menu clicki" onclick="dispDrop(this)">
            <a href="#">Item 4</a>
            <ul class="sub-menu hide">
                <li><a href="#">Sub-item A </a></li>
                <li><a href="#">Sub-item 1</a></li>
                <li><a href="#">Sub-item 1</a></li>
                <li><a href="#">Sub-item 1</a></li>
            </ul>
        </li>
        <li><a href="#">Item 5</a></li>
        <li><a href="#">Item 6</a></li>
    </ul>
</div>

標籤：javascript html jQuery css

上一篇：為什么浮動標簽在htmlcss表單中不起作用

下一篇：正則運算式模式查找所有沒有立即點字符的數字