Question

在我们的网站上，我们有一个带有嵌套过滤器的选项卡“过滤器1”是第一级，过滤器1具有许多子级别，我的任务是让用户从所有嵌套选择选项中仅选择一个选项。因此，在单击事件中，我添加了“ selected”类，假设用户单击了id = 2的选项，但是如果用户单击了id = 4的选项，则需要从id = 2中删除所选的类。

如果它在一个分支下，我可以使用jquery的sibilings（）来检查是否有其他元素具有“ selected”类，但是我如何做到这一点呢？父母的兄弟姐妹的孩子？

<details class="block filter">
  <summary>Fitler 1</summary> 
  <ul> 
    <details>
    <ul>
      <summary>Nested level 2.1</summary>
      <ul>
       <li id="1"></li>
       <li id="2"></li>
       <li id="3"></li>
      </ul>
    </ul>
    </details>
    <details>
    <ul>
      <summary>Nested level 2.2</summary>
      <ul>
       <li id="4"></li>
       <li id="5"></li>
       <li id="6"></li>
      </ul>
    </ul>
    </details>
    <details>
    <ul>
      <summary>Nested level 2.3</summary>
      <ul>
       <li id="7"></li>
       <li id="8"></li>
       <li id="9"></li>
      </ul>
    </ul>
    </details>
    ...
  </ul>

</details>

Answer 1

好，如果它们具有通用的类或名称，或者即使它们是唯一的选择元素：

首先，捕获点击事件（我使用过.class-common-on-all-your-selects，但是您可以使用name=[blabla]甚至是select：

$(document).on('click', '.class-common-on-all-your-selects', function(){
 $('.class-common-on-all-your-selects').prop("selected", false)
 $(this).prop("selected", true)
})

在内部取消选择具有指定类的所有元素，然后，将单击的选项标记为已选择。

如何让用户从下拉菜单中仅选择一个选项？

1 个答案: