flybird99
2017-09-17 00:51
采纳率: 100%
浏览 5.9k
已采纳

遍历某DIV下所有li,并在每个子li点击时触发此DIV的样式修改

如题,我是这样写的,不知道哪里不对,请帮忙调下,谢谢!

 <script>
   window.onload=function(){
     var divs =  document.getElementsByTagName("#col-lg-2");
    $("#dd-item").onclik(function()
            {divs.style.csstext='width: 25%; height:100%; position:fixed; top:350px; overflow-y:3px;'}) 
        }
 </script>      

 <div id="col-lg-2" class="col-lg-2" style="width: 25%">
  <ol class="dd-list">
                                    <li class="dd-item" data-id="1">
                                        <div class="dd-handle" id="li_Preliminary_Analysis">初步分析</div>
                                    </li>
                                    <li class="dd-item" data-id="2">
                                        <div class="dd-handle" id="li_Early_Disposal">先期处置</div>
                                    </li>
                                    <li class="dd-item" data-id="3">
                                        <div class="dd-handle" id="li_Middle_Disposal">中期处置</div>
                                                                                                        </li>
                                </ol>
                                </div>

最好能将具体调整代码示范,不做过多设置

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

9条回答 默认 最新

  • 面向对象的夜猫子 2017-09-17 02:48
    最佳回答
     <script>
        window.onload=function(){
            var $_oDiv = document.querySelector("#col-lg-2");
            var $_aLis = $_oDiv.querySelectorAll('li');
            $_aLis.forEach(function(index, item){
                this.onclick = function(){
                    $_oDiv.style.cssText='width: 25%; height:100%; position:fixed; top:350px; overflow-y:3px;
                }
            });
        }
    </script>
    
    <div id="col-lg-2" class="col-lg-2" style="width: 25%">
        <ol class="dd-list">
            <li class="dd-item" data-id="1">
                <div class="dd-handle" id="li_Preliminary_Analysis">初步分析</div>
            </li>
            <li class="dd-item" data-id="2">
                <div class="dd-handle" id="li_Early_Disposal">先期处置</div>
            </li>
            <li class="dd-item" data-id="3">
                <div class="dd-handle" id="li_Middle_Disposal">中期处置</div>
            </li>
        </ol>
    </div>
    
    评论
    解决 无用
    打赏 举报
查看更多回答(8条)

相关推荐 更多相似问题