标签的jQuery动态边距

Question

现在我有一些整洁的纯 CSS 选项卡。不幸的是，我的实现有一个严重的缺点，即实际的标签内容是绝对定位的。为了解决这个问题，我需要父元素 .tabs 根据 .tab-content 的高度具有动态边距底部。

这是我到目前为止尝试过的 jQuery，但它不起作用： （我也不喜欢最接近的（）方法，在这种情况下看起来效率很低）：

$(document).ready(function(){

    // Need some initial margin-bottom, don't like "manual" CSS-rules.
    // How to do this?

    $(".tabs label").on('click', tabMargin());

    // This does not work either.
    function tabMargin(){
        var x = $(this).closest(".tab-content").outerHeight(true);
        $(this).closest(".tabs").css('margin-bottom', x+20);
    }

});

如果有人关心这里的标记：

<div id="blog-wrapper">

    <div id="blog-left">
        <div id="blog-news">
            {{insert_module::55}}
        </div>
    </div>

    <div id="blog-right">
        <ul class="tabs" style="margin-bottom:260px;">
            <li>
                <input type="radio" name="tabs" id="tab1">
                <label for="tab1">
                    <span class="fa fa-gear"></span> 
                    <span class="tab-text">Tools</span>
                </label>
                <div id="tab-content1" class="tab-content">
                    {{insert_article::blog-tools}}
                </div>
            </li>

            <li id="blog-authorization">
                <input type="radio" name="tabs" id="tab2" checked>
                <label for="tab2">
                    <span class="fa fa-user"></span> 
                    <span class="tab-text">Mein Account</span>
                </label>
                <div id="tab-content2" class="tab-content">
                    {{insert_article::blog-authorization}}
                </div>
            </li>
        </ul>

        <br style="clear:both">

        <ul class="tabs" style="margin-bottom:1000px;">
            <li>
                <input type="radio" name="tabs2" id="tab3" checked>
                <label for="tab3">
                    <span class="fa fa-tag"></span>
                    <span class="tab-text">Tags</span>
                </label>
                <div id="tab-content3" class="tab-content">
                    <p class="reset">
                        <a href="blog.html">gewählte Tags zurücksetzen</a>
                    </p>
                    {{insert_module::60}}
                    <!-- TAGCLOUD -->
                </div>
            </li>

            <li id="blog-archive">
                <input type="radio" name="tabs2" id="tab4">
                <label for="tab4">
                    <span class="fa fa-archive"></span>
                    <span class="tab-text">Archiv</span>
                </label>
                <div id="tab-content4" class="tab-content">
                    {{insert_module::58}}
                </div>
            </li>

            <li>
                <input type="radio" name="tabs2" id="tab5">
                <label for="tab5">
                    <span class="fa fa-star"></span>
                    <span class="tab-text">Empfohlen</span>
                </label>
                <div id="tab-content5" class="tab-content">
                    {{insert_article::blog-featured}}
                </div>
            </li>
        </ul>       
        <br style="clear:both">
    </div>  

</div>

Answer 1

您无需指定()：

$(".tabs label").on('click', tabMargin);

---

你也不应该使用.closest()，因为你的目标元素是它的兄弟：

function tabMargin(){
    var x = $(this).siblings(".tab-content").outerHeight(true); // use siblings here
    $(this).closest(".tabs").css('margin-bottom', x+20);
}