Javascript 。单击并';无法更改选项卡容器';s高度

Javascript 。单击并';无法更改选项卡容器';s高度,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在我的电脑上使用domtab。(在“TOUS LES FILMS”和“AFFICHAGE HORAIRE”之间) 但是,高度不是自动设置的,这就是为什么每次单击它们时,我都尝试使用jquery对其进行修改 下面是选项卡的HTML结构 <div id="domtab1" class="domtab"> <ul class="domtabs"> <li><a id="fl1A" href="#t1"&g

我正在我的电脑上使用domtab。(在“TOUS LES FILMS”和“AFFICHAGE HORAIRE”之间) 但是,高度不是自动设置的,这就是为什么每次单击它们时,我都尝试使用jquery对其进行修改

下面是选项卡的HTML结构

    <div id="domtab1" class="domtab">
          <ul class="domtabs">
            <li><a id="fl1A" href="#t1">TOUS LES FILMS</a></li>
            <li><a id="fl1B" href="#t2">AFFICHAGE HORAIRE</a></li>
          </ul>
          <div class="flip1A" id="fli1A">
            <h2><a name="t1" id="t1"></a></h2>

               <ol class="rounded-list">

                                            <li><a href="#">Spiderman</a></li>
                                            <li><a href="#">Pokemon</a></li>
                                            <li><a href="#">X men</a></li>
                                            <li><a href="#">Blanche Neige</a></li>
              </ol>

            <p><a href="#top">back to menu</a></p>


          </div>
          <div id="fli1B" class="flip1B" >
            <h2><a name="t2" id="t2"></a></h2>

            <div class="heading2">
               <hr class="gradient_one" />
                <p class="hours_gradient">12h10</p>
              </div>
               <ol class="rounded-list">
                    <li><a href="#">Spiderman</a></li>
                     <li><a href="#">Pokemon</a></li>
                </ol>
              ...

            <p><a href="#top">back to menu</a></p>
          </div>
    </div>

您的处理程序工作正常,实际上所有处理程序都是正确的。 我试过第一个:

$('#fl1B').on("click", function (e) {
    var maxHeight2 = document.getElementById("fli1B").scrollHeight;
    console.log("New height: " + maxHeight2);
    $("#text_var").html(maxHeight2);
    $("#flip-tabs").css({
        'height': maxHeight2 + 'px'
    });
});
您的html中没有id为
flip tabs
的元素,因此我无法详细说明此问题。如果这不是问题本身:)

我用这个ID添加了一个div,因此您可以看到
css
调用也在工作:检查这里:
我正在
$(document).ready()
块中分配处理程序,这可能是代码中的差异。

处理程序工作正常,实际上所有处理程序都是正确的。 我试过第一个:

$('#fl1B').on("click", function (e) {
    var maxHeight2 = document.getElementById("fli1B").scrollHeight;
    console.log("New height: " + maxHeight2);
    $("#text_var").html(maxHeight2);
    $("#flip-tabs").css({
        'height': maxHeight2 + 'px'
    });
});
您的html中没有id为
flip tabs
的元素,因此我无法详细说明此问题。如果这不是问题本身:)

我用这个ID添加了一个div,因此您可以看到
css
调用也在工作:检查这里:
我正在
$(document).ready()
块中分配处理程序,这可能与代码不同。

请确保将单击事件放在dom ready函数中。有关更多信息,请参阅。请确保将单击事件放在dom就绪函数中。有关更多信息,请参阅谢谢您的回答,问题确实是因为代码不在
$(document).ready()
块中,但由于某种原因,当我单击时
maxHeight2
=0(而不是+1100),当它不可见时,高度可能是0(只是猜测)。检查此处:感谢您的回答,问题确实是因为代码不在
$(document).ready()
块中,但由于某种原因,当我单击时
maxHeight2
=0(而不是+1100),当它不可见时,高度可能是0(只是猜测)。请点击此处: