Question

我有一个包含3个项目的菜单。如何将文本更改为从菜单中选择的内容？

HTML

<div id="dropdown-container">
<div id="index-tab" onclick="toggleMenu()"><a href="#">1</a></div>
    <ul id="dropdown">
        <li ><a href="#"><span class="current-browse">1</span></a>
            <ul class="dropdown-items">
                <li class="dropdown-item"><a href="#">2</a></li>
                <li class="dropdown-item""><a href="#">3</a></li>
            </ul>
        </li>
    </ul>
</div>

JavaScript

function toggleMenu() {
var dropDown = document.getElementById('dropdown');    
if(dropdown.style.display == "block") { 
     dropdown.style.display = "none";
} else { 
     dropdown.style.display = "block";
   } 
}

例如当前显示的菜单：

1

2

3

如果选择2，则会显示：

2

1

3

如果选择3则会显示：

3

1

2

Answer 1

您是否要设置index-tab的文本或当前浏览范围的文本？无论哪种方式，您都需要在li项目上使用一些点击处理程序来获取具有您想要设置的任何一个的id或类的元素（如果使用了，则需要获取index-tab div的锚子项）。然后替换锚点或跨度的文本元素。 jQuery会让它变得更容易，但可以用任何一种方式完成。给出的jQuery示例需要获取锚子项然后设置文本，并且在显示菜单时执行此操作不是您想要的，因为还没有单击项目。

Answer 2

您需要以C的方式编写A，并根据下拉列表的值更改toggleMenu()的文字：

index-tab

Answer 3

添加了toggleSelection()功能：

event.preventDefault();用于阻止跳转到某个位置的链接默认操作。
selectedItem引用event.target（即实际点击的元素），这是.dropdown-item s之一。
根据.textContent的{{1}}，元素之间存在多次交换。此时，selectedItem和#current-browse（#index-tab a中的链接）有一个新的#index-tab，.textContent具有上一个项目编号。
在点击selectedItem并确定#dropdown之前，所有这些都不会发生。这可以通过eventListener：
实现
```
event.target
```

段

   dropDown.addEventListener('click', toggleSelection, false);

function toggleMenu() {
  var dropDown = document.getElementById('dropdown');
  if (dropDown.style.display == "block") {
    dropDown.style.display = "none";
  } else {
    dropDown.style.display = "block";
  }
}

function toggleSelection(event) {
  event.preventDefault();
  var selectedItem = event.target;
  var targetItem = selectedItem.textContent;
  var currentItem = document.getElementById('current-browse');
  var prevItem = currentItem.textContent;
  var extLink = document.querySelector('#index-tab a');
  currentItem.textContent = targetItem;
  extLink.textContent = targetItem;
  selectedItem.textContent = prevItem;
}

var dropDown = document.getElementById('dropdown');

dropDown.addEventListener('click', toggleSelection, false);

参考

addEventListener vs. onclick

'this' and EventHandlers

如何将文本更改为在Javascript中选择的内容？

3 个答案:

段

参考