如何使用 event.target.closest 进行导航栏 html javascript css？-css-IT问答社区-解决你的IT疑问

如何使用 event.target.closest 进行导航栏 html javascript css？

bitofagoob 3月前

我正在制作一个导航栏。单击具有子导航页的项目时，导航项目将展开或折叠。以下是 HTML/JS/CSS 代码片段。const navHasChilds = document.getElementsByClassName(\'ha...

我正在制作导航栏。单击具有子导航页的项目时，导航项目会展开或折叠。

这是 HTML/JS/CSS 代码片段。

const navHasChilds = document.getElementsByClassName("hasChild");
Array.from(navHasChilds).forEach(el => el.addEventListener('click', event => {
  event.target.closest(".hasChild").querySelector(".subnav").classList.toggle('active');
  event.target.closest(".hasChild").querySelector(".collapsible").classList.toggle('collapsible-expanded');
}));

body { background: #999; }

.collapsible {
  color: white;
  cursor: pointer;
  padding: 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 17px;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-right: 8px;
}

.collapsible-expanded {
  color: white;
  cursor: pointer;
  padding: 0px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 17px;
}

.collapsible-expanded:after {
  content: '\2212';
  color: white;
  font-weight: bold;
  float: right;
  margin-right: 8px;
}

ul.subnav {
  display: none
}

ul.subnav.active {
  display: block;
}

<li class="hasChild"><a>System<i class="collapsible"> </i> </a>
  <ul class="subnav">
    <li><a onclick='EASauthorized("/setup.html")'>Setup</a></li>
    <li><a onclick='EASauthorized("/date.html")'>Date</a></li>
    <li><a onclick='EASauthorized("/languages.html")'>Languages</a></li>
    <li><a onclick='EASauthorized("/settings.html")'>Settings</a></li>
    <li><a onclick='EASauthorized("/mgmt.html")'>Management</a></li>
  </ul>
</li>

现在，单击“子导航”类别下的项目时，导航项目会展开/折叠。我希望保留展开/折叠状态，直到单击 + 或 - 图标，而不是单击每个页面链接。（即）我希望事件侦听器仅适用于主导航菜单，而不适用于导航链接下的页面（子导航）。

这里有什么问题？

帖子版权声明 1、本帖标题：如何使用 event.target.closest 进行导航栏 html javascript css？
本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由bitofagoob在本站《css》版块原创发布，转载请注明出处！

最新回复 (0)

最新倒序只看楼主

Cubic 3月前 0 只看Ta

2楼

我如何使此下拉列表的每个项目都以全长单行显示，而不是换行？.autocomplete-items { /* position: absolute; */ /* border: 1px solid #ccc...

我如何使此下拉列表的每个项目都以全长单行显示，而不是换行显示？

.autocomplete-items {
    /* position: absolute; */
    /* border: 1px solid #ccc; */
    /* border-top: none; */
    /* border-radius: 0 0 4px 4px; */
    z-index: 100;
    top: 100%;
    left: 0;
    right: 0;
/*     width: auto; */
    max-height: 300px;
    overflow-y: auto;
    background-color: white;
    color: black;
}

.autocomplete-items .item {
    padding: 10px;
    cursor: pointer;
    background-color: white;
  width: auto;
  overflow:auto;
}

.autocomplete-items .item:hover {
    background-color: #eee;
}

.autocomplete-items .item.active {
    background-color: #e9e9e9;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="w-100 h-100 py-3">
            <form action="/" method="post">
                <div>
                    <div class="row my-3">
                        <div class="col"><input type="text" name="FirstName" id="FirstName" max_length="25" placeholder="Firstname" class="form-control" required="yes" ></div>
                        <div class="col"><input type="text" name="LastName" id="LastName" max_length="25" placeholder="Lastname" class="form-control" required="yes" ></div>
                    </div>
                    <div class="row my-3">
                        <div class="col">
                        <select name="Country" id="Country" class="form-control, form-select" aria-label="Default select example">
                          <option value="US">United States</option>
                          <option value="GB">United Kingdom</option>
                        </select>
                    </div>
                        <div class="col position-relative"><input type="text" name="Place" id="Place" label=" Place" max_length="25" list="PlaceSelect" autocomplete="off" placeholder=" City" class="form-control" required="" spellcheck="false" data-ms-editor="true" >
                        
                            <div class="d-flex flex-column mb-3 position-absolute">
                                <ul class="autocomplete-items m-0 p-0 border" id="PlaceSelect" style="display: block;">
                                <li class="item">New York City, Long: -74.005970, Lati: 40.714270, TZ: America/New_York, Population: 8804190</li>
                                <li class="item">New South Memphis, Long: -90.056760, Lati: 35.086760, TZ: America/Chicago, Population: 641608</li>
                                <li class="item">New Orleans, Long: -90.075070, Lati: 29.954650, TZ: America/Chicago, Population: 389617</li>
                                <li class="item">Newark, Long: -74.172370, Lati: 40.735660, TZ: America/New_York, Population: 281944</li>
                                <li class="item">Newport News, Long: -76.429750, Lati: 36.980380, TZ: America/New_York, Population: 182385</li>
                                </ul>
                            </div>
                        </div>
                <div class="col "><input type="number" name="Population" label="Zipcode" id="Zipcode" max_length="25" step="0.000001" min="-180" max="180" placeholder="Zipcode" class="form-control" required="yes" ></div>
                        <div class="col"><input type="number" name="Cost" label="Cost" id="Cost" max_length="25" step="0.000001" min="-180" max="180" placeholder="Cost" class="form-control" required="yes" ></div>
                    </div>
                </div>
            </form>
        </div>

Watashi 3月前 0 只看Ta

3楼

只需添加 white-space: nowrap; 到您的 .item 班级

.autocomplete-items {
  /* position: absolute; */
  /* border: 1px solid #ccc; */
  /* border-top: none; */
  /* border-radius: 0 0 4px 4px; */
  z-index: 100;
  top: 100%;
  left: 0;
  right: 0;
  /*     width: auto; */
  max-height: 300px;
  overflow-y: auto;
  background-color: white;
  color: black;
}

.autocomplete-items .item {
  padding: 10px;
  cursor: pointer;
  background-color: white;
  width: auto;
  overflow: auto;
  white-space: nowrap;
}

.autocomplete-items .item:hover {
  background-color: #eee;
}

.autocomplete-items .item.active {
  background-color: #e9e9e9;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="w-100 h-100 py-3">
  <form action="/" method="post">
    <div>
      <div class="row my-3">
        <div class="col"><input type="text" name="FirstName" id="FirstName" max_length="25" placeholder="Firstname" class="form-control" required="yes"></div>
        <div class="col"><input type="text" name="LastName" id="LastName" max_length="25" placeholder="Lastname" class="form-control" required="yes"></div>
      </div>
      <div class="row my-3">
        <div class="col">
          <select name="Country" id="Country" class="form-control, form-select" aria-label="Default select example">
            <option value="US">United States</option>
            <option value="GB">United Kingdom</option>
          </select>
        </div>
        <div class="col position-relative"><input type="text" name="Place" id="Place" label=" Place" max_length="25" list="PlaceSelect" autocomplete="off" placeholder=" City" class="form-control" required="" spellcheck="false" data-ms-editor="true">

          <div class="d-flex flex-column mb-3 position-absolute">
            <ul class="autocomplete-items m-0 p-0 border" id="PlaceSelect" style="display: block;">
              <li class="item">New York City, Long: -74.005970, Lati: 40.714270, TZ: America/New_York, Population: 8804190</li>
              <li class="item">New South Memphis, Long: -90.056760, Lati: 35.086760, TZ: America/Chicago, Population: 641608</li>
              <li class="item">New Orleans, Long: -90.075070, Lati: 29.954650, TZ: America/Chicago, Population: 389617</li>
              <li class="item">Newark, Long: -74.172370, Lati: 40.735660, TZ: America/New_York, Population: 281944</li>
              <li class="item">Newport News, Long: -76.429750, Lati: 36.980380, TZ: America/New_York, Population: 182385</li>
            </ul>
          </div>
        </div>
        <div class="col "><input type="number" name="Population" label="Zipcode" id="Zipcode" max_length="25" step="0.000001" min="-180" max="180" placeholder="Zipcode" class="form-control" required="yes"></div>
        <div class="col"><input type="number" name="Cost" label="Cost" id="Cost" max_length="25" step="0.000001" min="-180" max="180" placeholder="Cost" class="form-control" required="yes"></div>
      </div>
    </div>
  </form>
</div>

XtraSimplicity 3月前 0 只看Ta

引用 4楼

使用时，navHasChilds = document.querySelectorAll(\'.hasChild > a\'); 单击 \'Setup\' 也会切换菜单。但我只想在单击 \'System\' 时切换。请检查编辑后的代码。我之前在 2 个地方使用了 Setup

关于作者

bitofagoob

UID:7782一级用户组

主题数
0

帖子数
0

精华数
0

注册排名
7782

导航

论坛

我的

如何使用 event.target.closest 进行导航栏 html javascript css？

bitofagoob

TAG

作者主题

作者最近主题：