Question

我是jQuery的新手，我很想尝试修改在DOM上执行某些操作的脚本。

所以这是我的jQuery脚本：

$(document).ready(function () {
        $("thead.opening").click(function () {
            var tbodyElement =  $(this).next();

            $(this).next().slideToggle('slow', function () {
                $(this).prev("thead.opening").toggleClass("active");
                $("thead.opening").find(".imgAccordion").attr("src", "img/arrow.gif");
                $("thead.active").find(".imgAccordion").attr("src", "img/arrow_down.gif");
            });

            tbodyElement.style.display = 'auto !important';
            return false;
        });
    });

这是HTML页面的一部分：

<table class="standard-table-cls table-header-cls">
        <thead class="opening active">
        <tr>
            <th>
                <img class="imgAccordion" src="img/arrow_down.gif"/>
                Ricerca Flussi (la funzione e' consentita per flussi inferiori alle 300 fatture)
            </th>
        </tr>
        </thead>

        <tbody class="expanded">
            <tr>
                <td style="width: 100em;">
                    SHOW SOMETHING
                </td>
            </tr>
        </tbody>
</table>

...........................................................
...........................................................
...........................................................


<table class="standard-table-cls table-header-cls">

    <thead class="opening">
        <tr>
            <th>
               <img class="imgAccordion" src="img/arrow.gif"/>
               Ricerca Fatture
            </th>
        </tr>
    </thead>

    <tbody class="expanded" style="display: none;">
        <tr>
            <td style="width: 100em;">
                 SHOW SOMETHING ELSE
            </td>
        </tr>
    </tbody>

<table>

正如您在我的代码中所看到的，有两个不同的表具有相同的类（ standard-table-cls table-header-cls ）。

好的，所以 $（＆＃34; thead.opening＆＃34;）。点击是点击的 thead 元素 class =＆＃34开放＆＃34; ，是对还是我错过了什么？

好的，现在我想为与点击的 thead 元素相关的 tbody 元素设置一个特定的CSS值。

因此，正如您在上一个脚本中所看到的，我添加了：

此行应选择与点击的 thead 元素相关的 tbody 元素：

var tbodyElement =  $(this).next();

并在脚本的末尾我放置了这一行来设置特定的CSS设置：

tbodyElement.style.display = 'auto !important';

问题是这是执行但是在生成的HTML中我没有：

显示：自动; 预期的CSS，但我仍然有：

<tbody class="expanded" style="display: block;">

这是在将前两行插入我的脚本之前获得的相同值。

为什么它无法运作？我错过了什么？如何修复此脚本以获取所需的行为，以修改与单击的thead相关的tbody元素的显示值？

Answer 1

因为tbodyElement是jQuery方法$(this).next()返回的jQuery对象，它没有style属性，在jQuery中它是css()方法改变的样式

tbodyElement.css('display', 'auto');

请注意，javascript无法设置!important规则，但它确实会更改附加到元素的内联样式。

如果你想使用你做的元素的默认值

，也不是there is no auto for the display style

tbodyElement.css('display', '');

假设显示样式未在另一个样式表中设置

Answer 2

使用css（）jquery obj。

        $(document).ready(function () {
            $("thead.opening").click(function () {
                var tbodyElement =  $(this).next();

                $(this).next().slideToggle('slow', function () {
                    $(this).prev("thead.opening").toggleClass("active");
                    $("thead.opening").find(".imgAccordion").attr("src", "img/arrow.gif");
                    $("thead.active").find(".imgAccordion").attr("src", "img/arrow_down.gif");
                });

                tbodyElement.css('display', 'auto');
                return false;
            });
        });

Answer 3

试试这个......

   $(document).ready(function () {
        $("thead.opening").click(function () {

            $(this).next().slideToggle('slow', function () {
                $(this).prev("thead.opening").toggleClass("active");
                $("thead.opening").find(".imgAccordion").attr("src", "img/arrow.gif");
                $("thead.active").find(".imgAccordion").attr("src", "img/arrow_down.gif");
            });

            $(this).next().css('display', 'auto');
            return false;
        });
    });

Answer 4

我看到你现在尝试做什么，试图将样式显示道具移除到默认值。不要使用自动

试试这个..

$(this).next().css('display', '');

为什么这个JQuery脚本无法修改所选元素的CSS设置？

4 个答案: