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条)

报告相同问题？

提交

相关推荐 更多相似问题