用jQuery给父元素的父元素设置display：none为什么不起效啦？

Question

当我点击下图中的顶部左边的昨天的div（带下拉三角形的框）时候，显示下拉选项框。当我选中下拉框中的某项后，将其文本显示在顶部左边的div中，问题是：当我选中下拉框后，给整个下拉框div设置display：none；并没有生效隐藏，下面本人代码，请大神指点！

HTML:

 <div class='manageReportForms_ipt'>
                <div class='manageReportForms_context'><span>昨天</span><i class='manageReportForms-icon'></i></div>
                <div class='manageReportForms_date'>
                    <ul class='manageReportForms_ul'>
                        <li>昨天</li>
                        <li>过去7天</li>
                        <li>过去30天</li>
                    </ul>
                    <p>自定义范围</p>
                    <div class='date-parent'>
                        <div class="custom">
                            <input type="text" class="u-ipt form-date" value="2017-01-01">
                        </div>
                        <div class="custom custom-margin">
                            <input type="text" class="u-ipt form-date" value="2017-01-01">
                        </div>
                    </div>
                    <div class='date-dv-btn'>
                        <button class='date-btn'>确定</button>
                    </div>
                </div>
            </div>
        
        

jquery:

$('.manageReportForms_ipt').click(function () {
            $('.manageReportForms_date').css('display','inline-block');
        });

        $('.manageReportForms_ul li').click(function () {
            console.log($(this),52520)
            if($(this).html()=='昨天'){
                $('.manageReportForms_context span').html('').html($(this).html());
                $(this).parent('.manageReportForms_ul').parent('.manageReportForms_date').css('display','none');
                $('.sessionData-select').css('display','none');
            }else{
                $('.manageReportForms_context span').html('').html($(this).html());
                $('.manageReportForms_ul').parent('.manageReportForms_date').css('display','none');
                //console.log( $('.manageReportForms_ul').parent('.manageReportForms_date'),12532)
                $('.sessionData-select').css('display','block');
            }
        });
        $('.sessionData-select-context').click(function () {
            $('.sessionData-select-tip').css('display','block');
        })           

Answer 1

可能是因为冒泡。
你在$('.manageReportForms_ul li').click的回调函数最后加一个return false或者event.stopPropagation()试试

$('.manageReportForms_ul li').click(function (event) {
        console.log($(this),52520)
        if($(this).html()=='昨天'){
            $('.manageReportForms_context span').html('').html($(this).html());
            $(this).parent('.manageReportForms_ul').parent('.manageReportForms_date').css('display','none');
            $('.sessionData-select').css('display','none');
        }else{
            $('.manageReportForms_context span').html('').html($(this).html());
            $('.manageReportForms_ul').parent('.manageReportForms_date').css('display','none');
            //console.log( $('.manageReportForms_ul').parent('.manageReportForms_date'),12532)
            $('.sessionData-select').css('display','block');
        }
        return false; // 或者 event.stopPropagation()
    });

Answer 2

给的jQ代码里好几个DOM元素都找不到……所以只能仅就代码给几个建议了。

1. 多看文档，代码里有好些写的略显繁琐，比如：

   $(this).parent('.manageReportForms_ul').parent('.manageReportForms_date').css('display','none');

   这句，就可以改成：

   $(this).parents('.manageReportForms_date').hide();

   这样直接用.parents()去找祖先元素，然后用.hide()来设置display:none，jQ都有现成的接口。
   还有$(this).html()，建议在处理函数一开始就缓存下来，比如：

   var thisText = $(this).text();

   而且这里也推荐用.text()，因为毕竟要抓的是内容文本嘛（这里建议去搜下innerHTML和textContent/innerText的区别）。这样后边那句也可以直接.text(thisText);了。

2. 选择器不建议用类名，也不建议写复杂的选择器，最好是直接用id抓然后用jQ提供的遍历接口来筛选。比如：

   $('.manageReportForms_context span').html('').html($(this).html());

   建议改成：

   $('.manageReportForms_context').find('span').text(thisText);

Answer 3

$('.manageReportForms_ipt').on('click','.manageReportForms_ul li',function () {

alert('')

}