个人中心
gpt4 book ai didi

javascript - 如何使 li (事件)并在单击其父 li 时可见

转载 作者：太空宇宙 更新时间：2023-11-04 11:21:45 25 4
gpt4 key购买 nike

helo，我只是想让我的 li child 在 li parent 的点击下可见，如果你想查看我想要做什么，请查看 http://technologyvs.co.uk转到“客户说什么”部分

var selector, elems, makeactive,//this is for li one
    childSelector,childElems , makeChildActive;//this is for li two
    
    
    
    selector = ".parent li";
    elems = document.querySelectorAll(selector);
    
    makeactive = function () {
        for (var i = 0; i < elems.length; i++) {
            elems[i].classList.remove('active');
            this.classList.add('active');
        }
    }
    
    for (var i = 0; i < elems.length; i++) {
    
        elems[i].addEventListener("mousedown", makeactive);
    }
    
    
    childSelector = ".child li"
    childElems = document.querySelectorAll(childSelector);
    
    
    makeChildActive = function (){
    
    
    for (var j=0;j<childElems.length;j++){
      
    
        childElems[j].classList.remove('child-active');
        this.classList.add('child-active');  
         
        
    }
    
    }
    
    for(var j=0;  j<childElems.length;j++){
    childElems[j].addEventListener("mousedown",makeChildActive);
      
    }


  
li.active{
    color: red;
    }
    
    
    .text li{
    visibility:visible;
        transition: all 1s ease-in-out;
        
    }
    
    
     li.child-active{
    
    visibility: hidden;
    width: 200px;
    margin-left: 25px;     
    font-size: 25px;
    
    } 
<!Doctype html>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" href="custom.css" type="text/css">
    </head>
    
    <body>
        <h1>heloo</h1>
    <ul class="parent">
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
        
    <ul class="child">
        <li>text1</li>    
        <li>text2</li>
        <li>text3</li>
        <li>text4</li>
    </ul>       
    <script src="custom.js"></script>                    
    </body>
    </html>

最佳答案

这是执行此操作的简单代码，可能有一些我没有考虑的边缘情况，但本质上这可以解决问题。我在下面的代码片段中将代码添加到您的修改版本中，以便您可以看到它的工作原理。我已经删除了所有不必要的代码来展示它是如何工作的。

// A handler that allows us to remember the 'i' value when executing the click
function eventHandlerClosure(i){
    parents[i].addEventListener('click', function(e){
        // disable the currently active one
        var active = document.querySelector('.child li.active');
        // (if there is one)
        if(active) active.className = '';
        // add the active class to the newly selected child
        if(children[i]) children[i].className = 'active';
    }, false);
}

// select all parents and children
var parents = document.querySelectorAll('.parent li');
var children = document.querySelectorAll('.child li');

// attach the click events
for(var i = 0; i < parents.length; i++) eventHandlerClosure(i);

function eventHandlerClosure(i){
    parents[i].addEventListener('click', function(e){
        var active = document.querySelector('.child li.active');
        if(active) active.className = '';
        children[i].className = 'active';
    }, false);
}

var parents = document.querySelectorAll('.parent li');
var children = document.querySelectorAll('.child li');

for(var i = 0; i < parents.length; i++) eventHandlerClosure(i);
.child li { visibility: hidden; }
.child li.active { color: red; visibility: visible; }
 <ul class="parent">
   <li>one</li>
   <li>two</li>
   <li>three</li>
   <li>four</li>
 </ul>
        
 <ul class="child">
    <li>text1</li>    
    <li>text2</li>
    <li>text3</li>
    <li>text4</li>
 </ul>

关于javascript - 如何使 li (事件)并在单击其父 li 时可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32715735/

25 4 0
文章推荐： java - Hibernate，如果不使用beginTransaction会发生什么？
文章推荐： linux - ESXi 中的端口组和 vSwitch
文章推荐： python - python脚本中的os.system命令导致错误
文章推荐： javascript - jQuery slider 图像向下移动
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com