Question

＆＃13;

var NavLinks = document.querySelectorAll('.nav-link');
var circuses = document.querySelectorAll('.circle');


for (var i = 0; i < NavLinks.length; i++) {
    var navLink = NavLinks[i];
    navLink.addEventListener('click', function () {      
        for (var i = 0; i < circuses.length; i++) {
           var circle = circuses[i];
           circle.style.display='none';
        }
        var theLastChild = navLink.lastChild;
        theLastChild.style.display='block';   
      
    }
    );  
  }

＆＃13;

.nav-container{   
    height: 10px;
    background: white;
    padding: 30px 0px 40px 0px;  
    margin-left: 18%;
    margin-right: 18%;     
}
.nav-body  ul{
    text-align: right;
}
.nav-body  ul li{
    display: inline- block;
    float: left;
    margin-right: 30px;    
}
#logo{
    margin-right: 0px;
}
.nav-body ul li{
    line-height: 0.6;
}
#logo{    
    margin-top: -10px;
} 
#logo-light-blue{
    color: #5dc5ef;
    font-weight: 900;
}
#logo-dark-blue{
    color: #1885c8;
    font-weight: 900;
}
.circle {
    display: none;
	width: 8px;
	height: 8px;
	background: #5dc5ef;
	/* -moz-border-radius: 50px;
	-webkit-border-radius: 50px; */
    border-radius: 4px;
    margin: auto;
    margin-top: 7px;
}

＆＃13;

<header class="nav-container">
        <nav class="nav-body">
            <ul>
                <li class="nav-link"><a  href="#">צור קשר</a>
                <div class="circle"></div></li>
                <li class="nav-link"><a href="#">המלצות ומאמרים</a>
                    <div class="circle"></div></li>
                <li class="nav-link"><a href="#">שאלות נפוצות</a>
                    <div class="circle"></div></li>
                <li class="nav-link"><a href="#">אודות ד"ר שי מרון אלדר</a>
                    <div class="circle"></div></li>
                <li class="nav-link"><a href="#">אודות ההליכים</a>
                    <div class="circle"></div></li>
                <li class="nav-link"><a href="#">ראשי</a>
                    <div class="circle"></div></li>
                <li id="logo"> <h3> <span id="logo-light-blue">  ד"ר </span><span id="logo-dark-blue"> שי מרון  אלדר  </span></h3><br>   
                        <h6> פתרונות כירורגיים להשמנת יתר וניתוחים זעיר פולשניים</h6></li>
            </ul>
        </nav>
    </header>

＆＃13;

我需要在该类别菜单下创建一个蓝色圆圈，我按下了。但现在蓝色圆圈仅添加到最后一个菜单类别。按下哪一个并不重要。我正在寻找被按下的菜单类别的最后一个孩子。但它每次都显示我所有菜单类别的最后一个孩子。有什么问题？

＆GT;

Answer 1

您在HTML中有错误。需要关闭跨度标签。

            <li id="logo"> 
              <h3> 
                <span id="logo-light-blue">  ד"ר </span>
                <span id="logo-dark-blue"> שי מרון  אלדר  </span>
              </h3>
              <br>   
              <h6> פתרונות כירורגיים להשמנת יתר וניתוחים זעיר פולשניים</h6>
             </li>

并且Id属性对于元素应该是唯一的，您在整个地方重复圆圈作为Id。

<div id="circle"></div></li>

这不能解决它，尝试更好地解释这个问题，因为即使在演示中你已经把结果放在了一边。我们是否缺少一些CSS或样式库？

编辑：我想我知道你想要什么，是这个吗？看看小提琴： fiddle here

点击元素后，是否需要从其他元素中删除圆圈？

如果您需要将圆圈仅放在1个元素上，则需要将其从其他元素中删除。这是一个小提琴，表明： fiddle with only 1 circle

差异在于：

var NavLinks = document.querySelectorAll('.nav-link');

for (var i = 0; i < NavLinks.length; i++) {
    var navLink = NavLinks[i];
    navLink.addEventListener('click', function (event) {
            var allNavs = document.querySelectorAll('.nav-link div');
        for (var it = 0; it < allNavs.length; it++){
            console.log(allNavs[it]);
          allNavs[it].classList.add('invisible');
          allNavs[it].classList.remove('circleVisible');
         }
        console.log(allNavs);
            var targetElement = event.target || event.srcElement;
        var circleDiv = targetElement.parentNode.querySelectorAll('div');
        console.log(circleDiv[0]);
        circleDiv[0].classList.add('circleVisible');
        circleDiv[0].classList.remove('invisible');
        console.log(circleDiv[0]);
    }
    );  
  }

我已经离开了console.logs，所以你看看它是如何工作的，在运行真正的代码时将它们删除：）

Answer 2

我看到的第一个大问题是你有嵌套for循环但是使用了与 i 相同的迭代器变量。如果要进入下一个循环，则需要内循环以获得不同的变量。在这种情况下，我会经常使用 ii ，因为它很容易。

此外，你似乎是以迂回的方式做到这一点。我不完全确定你需要什么，但如果它看起来如此，那么这个解决方案就更简单了。

CSS

.circle {
    display: none;
    ... other attributes
}

.active-menu-item > .circle {
    display: block;
}

的JavaScript

var NavLinks = document.querySelectorAll('.nav-link');

for (var i = 0; i < NavLinks.length; i++) {
    var navLink = NavLinks[i];
    navLink.addEventListener('click', function () {      
        for (var ii = 0; ii < NavLinks.length; ii++) {
           NavLinks[ii].classList.remove("active-menu-item");
        }
        navLink.classList.add("active-menu-item");
    });  
}

样式被添加到一组元素中的最后一个子元素，而不是所选元素的最后一个子元素

2 个答案: