只使用JS和css，我可以实现一个过滤器，使：单击/点击JS下拉菜单显示/隐藏按数据类型划分的页面？

在SO成员.marolie的帮助下，我学会了如何实现一个JS过滤器/选择器["演示JS过滤器“]。我已经在测试页面上完美地工作了：它显示/隐藏divs根据“data-types”分配给他们在身体html.然而，选择是通过滑动<select>下拉列表，并放弃在首选选项.这不是我想要的.
我想利用我现有的导航栏下拉菜单[“我的下拉菜单”]作为过滤器/选择器。我特别想保留我的下拉菜单现有的交互性，即一次点击/点击显示整个下拉菜单内容块，一次点击内容块外部关闭它。
我希望下拉列表中的元素代表html页面的各种显示/隐藏<div>“选项”，并允许用户通过额外的单击/点击来从中进行选择（本质上是演示JS过滤器所做的，但是在点击/点击的激励下）.一旦通过点击/点击导航栏显示，整个下拉式内容块必须保持在屏幕上（如当前所做的那样），以便这实际上是可能的。
在通过id=“media-selector-demo”和name=“filter”使下拉列表可识别之后，我希望可以将demo JS过滤器的<option>元素分配给其中的<a>元素，整个过程就像是js过滤器的<select>下拉菜单。我有一个模糊的想法，使用<a>元素可能会避免在JS中使用另一个onClick。我尝试了<a>和<option>元素的各种组合，但还没有任何效果。
我需要另一个onClick来通过下拉菜单调用JS过滤器吗？或者我可以通过“活动”<a>状态调用JS过滤器吗？
我在不断尝试和犯错。
以下是我认为与上面讨论的所有内容相关的代码部分：

我的下拉菜单基于以下代码。JS在页头：

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myDropdownJS() {
  document.getElementsByClassName("navbarDROPDOWN-JS")[0].classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
  var myDropdown = document.getElementsByClassName("navbarDROPDOWN-JS")[0];
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}

我的下拉菜单****html在导航栏（大部分的css只是设计样式）：

<span class="dropdown" onclick="myFunction()">
<a class="dropbtn navbarDROP-ICON" style="opacity:0.5; padding-top:0px;">menu</a>
<a class="dropbtn navbarDROP-TXT" style="opacity:0.5">menu&nbsp;&nbsp;</a>
<a class="dropbtn navbarDROP-TXT">Career Works by Date&nbsp;&nbsp;</a>
<div class="dropdown-content navbarDROPDOWN-JS" >
    <a class="tag-bgd-INSTLLN" href="#">Installations (all media)</a>
    <a class="tag-bgd-MOVIMG" href="#">Works with moving image (inc. vid/film releases)</a>
    <a class="tag-bgd-SNDMUS" href="#">...with sound and music (inc. sound/music releases)</a>
    <a class="tag-bgd-PHOTO" href="#">...with photographs</a>
    <a class="tag-bgd-DRAW" href="#">...with drawing (inc. 2D works)</a>
    <a class="tag-bgd-TXT" href="#">...with text</a>
    <a class="tag-bgd-PERF" href="#">...with performative action</a>
    <a class="tag-bgd-COLPUB" href="#">Collaborative and public works</a>
    <a class="tag-bgd-OBJDEV" href="#">>Objects, garments, devices</a>
    <a class="tag-bgd-EDPUB" href="#">Editions, publications</a>
    <a class="tag-bgd-CAREER" href="#">Career Works by Date</a>
  </div>

上图：<a href>元素包含了可选样式页面的URL，如果我可以让用户通过下拉菜单选择性地显示/隐藏这一页的部分内容，那么就不需要这些了。

演示JS过滤器基于以下代码（通过SO用户.marolie）。JS位于页面末尾：

var select = document.getElementById('media-selector-demo');
var filter;

select.addEventListener("change", function() {
  filter = select.value;
    
  var elements = document.querySelectorAll('.wk-date_ITEM');
  elements.forEach((el) => {
      var type = el.dataset.type.split(', ');
    if (type.includes(filter)) {
    
      el.classList.remove('hide-by-media');
    } else {
      el.classList.add('hide-by-media');
    }

  })
});

演示JS过滤器****CSS：

.hide-by-media {
    display: none;
}

页体中的演示JS过滤器****html：

<select id="media-selector-demo" name="filter">
    <option value="INSTLLN"> Installations (all media)</option>
    <option value="MOVIMG"> Works with moving image (inc. vid/film releases)</option>
    <option value="SNDMUS" >...with sound and music (inc. sound/music releases)</option>
  </select>

示例页体中的div（有80-100个）：

<!-- ++++++++++ START FULL-WIDTH LIST ENTRY '2017 STATE OF DREAD' ++++++++++ -->
<div id="state-of-dread" class="w3-container wk-date_ITEM" data-type="INSTLLN, SNDMUS">
     <div class="w3-container wk-date_TXT-IMG">
        <div class="wk-date_GRID">          
          
          <div class= "h3 wk-date_DATE"> 2017 </div>
          <div class="wk-date_TTL"><h1>State of Dread</h1></div>
         <div class="h2 wk-date_KIND-1" >Installation</div>
          <div class="p wk-date_KIND-2" ><span class="sound">Sound</span>, for x2 interconnected rooms.<br>AB, CD, EF, Solo exhibition (as trio), Ohrenhoch sound gallery, Berlin.</div>
          <div class="wk-date_IMG">
          <div class="w3-container w3-right wk-date_IMG-BOX-LSCP">
          <img src="../../imgs/INSTALLATION-EVENT/2017_dread_thmb.jpg"
          alt="'xx' by Andrew Stones, installation view, xx"></div>
          </div>
       
        </div>
    </div>
</div>
<!-- ++++++++++ END FULL-WIDTH LIST ENTRY '2017 STATE OF DREAD' ++++++++++ -->

演示JS过滤器：JS位于页面末尾：

<script type="text/javascript">
var select = document.getElementById('media-selector-demo');
var filter;

select.addEventListener("change", function() {
  filter = select.value;

  var elements = document.querySelectorAll('.wk-date_ITEM');
  elements.forEach((el) => {
      var type = el.dataset.type.split(', ');
    if (type.includes(filter)) {
      el.classList.remove('hide-by-media');
    } else {
      el.classList.add('hide-by-media');
    }

  })
});
</script>

您需要做的是将事件侦听器从select, change更改为drop down element, click。您还需要在下拉元素上添加select as data-value属性中的选项值。
1 -向元素添加一个data-value属性以表示要隐藏的内容

<a class="tag-bgd-INSTLLN" href="#" data-value="INSTLLN">

2 -定位要将事件侦听器附加到的下拉元素。

const dropDownElements = document.querySelectorAll('.dropdown-content a')

3 -将事件侦听器附加到选定的目标（PS.函数中的e代表事件，单击事件侦听器生成事件对象）

dropDownElements.forEach((dropDownElement) => {
    dropDownElement.addEventListener('click',(e)=>{
        const filter = e.target.dataset.value;
    })
})

4 -剩下的只是添加demo js filter中使用的过滤器的其余部分

dropDownElements.forEach((dropDownElement) => {
    dropDownElement.addEventListener("click", (e) => {
        const filter = e.target.dataset.value
        var elements = document.querySelectorAll(".wk-date_ITEM")
        elements.forEach((el) => {
            var type = el.dataset.type.split(", ")
            if (type.includes(filter)) {
                el.classList.remove("hide-by-media")
            } else {
                el.classList.add("hide-by-media")
            }
        })
    })
})

只使用JS和css，我可以实现一个过滤器，使：单击/点击JS下拉菜单显示/隐藏按数据类型划分的页面？

1条答案

相关问题

热门标签

最新问答