Materialize CSS下拉菜单点击后无法更新触发按钮DOM文本问题

你遇到的核心问题是**this的指向错误**，导致你修改的不是下拉触发按钮的文本，而是点击的下拉选项本身的文本。控制台打印的是选项的innerText，所以看起来修改成功了，但按钮的文本完全没变化。另外，你重复初始化下拉组件的操作是多余的，也解决不了DOM更新的问题。

具体问题拆解 #

当你在下拉选项的onclick中调用changeText()时，函数内部的this指向的是当前被点击的<a>标签（也就是那个显示"test"的下拉选项），而不是你想要修改的.dropdown-trigger按钮。所以代码里的this.innerText修改的是选项的文本，而非按钮的。

修正后的代码方案 #

方案1：直接选中触发按钮修改文本（保留原onclick写法）

function changeText() {
  // 明确选中下拉触发按钮元素
  const triggerBtn = $('.dropdown-trigger');
  // 修改按钮的文本内容
  if (triggerBtn.text() === 'Drop Me!') {
    triggerBtn.text('success');
  } else {
    triggerBtn.text('Drop Me!');
  }
  // 不需要每次点击都重新初始化下拉组件，一次就够
  console.log(triggerBtn.text());
}

$(document).ready(function() {
  // 仅初始化一次下拉组件
  $('.dropdown-trigger').dropdown({ 
    alignment: 'right', 
    constrainWidth: false, 
    coverTrigger: false 
  });
});

方案2：使用jQuery事件委托（更规范的写法）

如果你不想在HTML里写onclick，可以用事件委托绑定点击事件，这样代码结构更清晰：

<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
 <li><a href="#" class="dropdown-option">test</a></li>
</ul>

$(document).ready(function() {
  // 初始化下拉组件
  $('.dropdown-trigger').dropdown({ 
    alignment: 'right', 
    constrainWidth: false, 
    coverTrigger: false 
  });

  // 给下拉选项绑定点击事件
  $('#dropdown1').on('click', '.dropdown-option', function() {
    const triggerBtn = $('.dropdown-trigger');
    if (triggerBtn.text() === 'Drop Me!') {
      triggerBtn.text('success');
    } else {
      triggerBtn.text('Drop Me!');
    }
    console.log(triggerBtn.text());
  });
});

额外说明 #

你之前尝试重新初始化下拉组件是没用的，因为Materialize的dropdown()初始化方法是用来绑定下拉交互逻辑的，和按钮文本的DOM更新没有关系。只要直接修改按钮的文本内容，DOM就会实时更新，不需要重新初始化组件。

内容的提问来源于stack exchange，提问作者icecub