javascript - 用jQuery给父元素的父元素设置display：none为什么不起效啦？-PHP中文网问答

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

HTML:

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');
        })

$('.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() });

全部回复(3)

高洛峰2017-04-11 12:03:07 3楼

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

赞 +0

添加回复

天蓬老师2017-04-11 12:03:07 2楼

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

多看文档，代码里有好些写的略显繁琐，比如：
```
$(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);了。
选择器不建议用类名，也不建议写复杂的选择器，最好是直接用id抓然后用jQ提供的遍历接口来筛选。比如：
```
$('.manageReportForms_context span').html('').html($(this).html());
```
建议改成：
```
$('.manageReportForms_context').find('span').text(thisText);
```

怪我咯2017-04-11 12:03:07 1楼

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

alert('')

}