使用 Javascript 更新 CSS答案

【问题标题】：Update CSS using Javascript使用 Javascript 更新 CSS
【发布时间】：2014-11-13 17:31:47
【问题描述】：

我正在使用以下 Javascript 打开和关闭常见问题解答样式页面的 div 块。我试图让 LI 显示一个 cursor:pointer 只有当它下面有一个子 div 时。

<script type="text/javascript">
    $(document).ready(function() {
        $('#faqs li').each(function() {
            var tis = $(this),
            state = false,
            answerNext = tis.next('div').hide().css('height','auto').slideUp();
            answerAll = $('#faqs').children('div').hide().css('height','auto').slideUp();
            tis.click(function() {
                state = !state;
                answerAll.slideUp(state);
                $('#faqs').children('li').removeClass('active');
                answerNext.slideToggle(state);
                tis.addClass('active',state);
            });
        });
    });
</script>

如果子 div 存在，我如何才能添加 cursor:pointer 的类？

这是我正在使用的 HTML：

<div id="faqs">
<ul class="servicelist">
<div class="servicelisttitle">List Title</div>
<li>List Item Without Div</li>
<li>List Item WITH Div</li>
<div>This will open when above LI is clicked</div>
<li>List Item Without Div</li>
</ul>

【问题讨论】：

你能展示一些示例 HTML 吗？您在谈论子 div 元素，但代码指的是兄弟姐妹（通过 next()）。
好吧，如果你在 CSS 中拼写 cursor 属性的拼写和这里一样，不管我们告诉你什么，它都不会做任何事情。
谢谢你，查尔斯！我想我还需要一杯咖啡……

标签： javascript html css

【解决方案1】：

你没有显示太多代码，但如果你有类似的东西

<ul id="faqs">
    <li>No child</li>
    <li>Child<div>Something</div></li>
    <li>Still no child</li>
    <li>With Child<div>Something else</div></li>
</ul>

您可以只选择所有子 div，然后带上他们的父母（lis 和 div 孩子）：

$('#faqs > li > div').parent().css('cursor','pointer');

Here's a jsfiddle.

【讨论】：

我会一直隐藏“SOMETHING”，直到“孩子”被点击。
jQuery 仍然可以选择隐藏的元素，所以没关系。它仍然可以工作。
我的 HTML 在 LI 之外有 DIV。你的代码应该还能工作吗？
否，您更新问题所用的 HTML 无效。 ul 元素的唯一允许子元素是 li 元素。
太棒了！感谢高宝！感谢您的帮助！我想我已经如愿以偿了。