如何在具体情况下停止隐藏下拉内容？

Question

我用物化库做了一个下拉菜单。它包含项目列表。现在我想在所有项目的底部查看更多链接。该链接已成功添加，但问题是当我单击该链接下拉/选择时会关闭。

const select = document.querySelector("select");

const fillSelect = (newOptions) => {
   const options = select.querySelectorAll("option");
   options.forEach((x) => x.remove());
   newOptions.forEach((opt) => {
      
      const optionElement = document.createElement("option");
      optionElement.innerHTML = opt;
      select.appendChild(optionElement);
   });
   updateSelect();
};

const addViewMoreLink = () => {
  const link = document.createElement('div');
  link.innerHTML = 'View more';
  link.addEventListener('click', e => {
    e.preventDefault();
    e.stopPropagation();
    return false;
  })
  const dropdownContent = select.parentNode.querySelector(".dropdown-content");
  dropdownContent.appendChild(link);
}


const updateSelect = () => {
  window.M.FormSelect.init(select, {});
  
  
}

window.onload = function(){
  fillSelect(["Option 1", "Option 2", "Option 3"]);
  addViewMoreLink()
}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<select id="organization-input">
</select>

我希望当我单击更多视图时，它应该关闭选择/下拉内容并显示新选项。添加新选项不是问题。目前的问题是，即使我使用了 stop e.stopPropagation();

，它也会关闭

Answer 1

<style type="text/css">
  .classic-dropdown .dropdown-content.select-dropdown {
    pointer-events: none;
  }
  .classic-dropdown .dropdown-content.select-dropdown li {
    pointer-events: all;
  }
</style>

<div class="classic-dropdown">
  <select id="organization-input">
  </select>
</div>

<script type="text/javascript">
const select = document.querySelector("select");

const fillSelect = (newOptions) => {
    const options = select.querySelectorAll("option");
    options.forEach((x) => x.remove());
    newOptions.forEach((opt) => {

        const optionElement = document.createElement("option");
        optionElement.innerHTML = opt;
        select.appendChild(optionElement);
    });
    updateSelect();
};

const addViewMoreLink = (e) => {
    const link = document.createElement('div');
    link.innerHTML = 'View more';
    link.addEventListener('click', e => {
        e.preventDefault();
        e.stopPropagation();
        return false;
    })
    const dropdownContent = select.parentNode.querySelector(".dropdown-content");
    dropdownContent.appendChild(link);
}


const updateSelect = () => {
    window.M.FormSelect.init(select, {});
}

window.onload = function() {
    fillSelect(["Option 1", "Option 2", "Option 3"]);
    addViewMoreLink()
}

document.getElementsByClassName('dropdown-content')[0]
</script>

Answer 2

正如您所提到的，您希望在单击查看更多并显示新选项时关闭下拉菜单。所以当你点击它时它会被关闭是很好的。现在您需要做的就是添加新选项，然后在dropdown-trigger 上触发一个点击事件，这样它就会再次打开并显示新选项。单击外部时下拉菜单未关闭的原因是正文高度等于其内容高度（下拉容器），因此您实际上并未单击正文。这就是为什么我在 css 中的 body 上设置了min-height。

const select = document.querySelector("select");

const fillSelect = (newOptions) => {
   const options = select.querySelectorAll("option");
   // options.forEach((x) => x.remove());
   newOptions.forEach((opt) => {
      const optionElement = document.createElement("option");
      optionElement.innerHTML = opt;
      select.appendChild(optionElement);
   });
   updateSelect();
};

const addViewMoreLink = () => {
  const link = document.createElement('div');
  link.innerHTML = 'View more';
  link.addEventListener('click', e => {
    fillSelect(["Option 4", "Option 5", "Option 6"]);
    document.getElementsByClassName('dropdown-trigger')[0].click();
  });
  const dropdownContent = select.parentNode.querySelector(".dropdown-content");
  dropdownContent.appendChild(link);
}


const updateSelect = () => {
  const instances = window.M.FormSelect.init(select, {});
}

document.addEventListener('DOMContentLoaded', function() {
  fillSelect(["Option 1", "Option 2", "Option 3"]);
  addViewMoreLink();
});

body {
  min-height: 100vh;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<select id="organization-input"></select>