.click 不适用于更改选项卡容器的高度

Question

我在我的网站上使用domtab。（介于"TOUS LES FIMS"one_answers"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>

下面是我尝试过但没有成功的jquery代码：

              $('#fl1B').on("click", function (e) {
                    var maxHeight2 = document.getElementById("fli1B").scrollHeight;
                    $("#text_var").html(maxHeight2);
                    $("#flip-tabs").css({
                        'height': maxHeight2 + 'px'
                    });
                });
                $("#fl1B").click(function () {
                    var maxHeight2 = document.getElementById("fli1B").scrollHeight;
                    $("#text_var").html(maxHeight2);
                    $("#flip-tabs").css({
                        'height': maxHeight2 + 'px'
                    });
                });
                $('#fl1B').live('click', function () {
                    var maxHeight2 = document.getElementById("fli1B").scrollHeight;
                    $("#text_var").html(maxHeight2);
                    $("#flip-tabs").css({
                        'height': maxHeight2 + 'px'
                    });
                });

Answer 1

您的处理程序运行良好，实际上所有处理程序都是正确的。我试过第一个：

$('#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调用也在工作：请查看此处：http://jsfiddle.net/balintbako/9WYpL/我在$(document).ready()块中分配处理程序，这可能是您代码中的差异。