0

http://miheresources.com/html/miche-u/lead-with-style

「Lead With Style」をクリックすると、自動的に「Calls 1-6」の下に配置されます。

ご覧のとおり、ページの右側のコンテンツはそのコンテナーをエスケープしています。これはフロートの問題ではありませんが、おそらく絶対位置と表示に関係しています。

jQuery タブと jQuery アコーディオンを使用しています。このスクリプトを見つけて修正しましたが、機能しません:

$(function() { 
    var parentHeight = $('#accordion').height(), 
        childHeight = $('.ui-tabs-panel').height(); 

    if (parentHeight <= childHeight) { 
        $('#accordion').height(childHeight); 
    } 
});

関連する CSS は次のとおりです。

#main-content {
    background-color: rgba(255,255,255,.5);
    padding: 35px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    position: relative;
}

#accordion { position: relative; }
    #accordion h3 {
        width: 220px;
        margin: 0;
        padding: 4px 0 8px;
        font-size: 1.1em;
        cursor: pointer;
        outline: none;
        color: #6a6a6a;
    }

#accordion > div > ul {
    width: 205px;
    padding: 0 0 7px 15px;
}
    #accordion > div > ul li {
        background: url(../images/arrow.png) left 9px no-repeat;
        padding: 6px 0 6px 10px; 
        outline: none;
    }
        #accordion > div > ul li a { font: .9em Arial, "Lucida Grande", sans-serif; outline: none; }
        #accordion > div > ul li a:link, #accordion > div > ul li a:visited { color: #7d7d7d; }
        #accordion > div > ul li a:hover, #accordion > div > ul li.ui-state-active a { color: #64d1e7; }
        #accordion > div > ul li.ui-state-active a { text-decoration: underline; }

#accordion > div > div.ui-tabs-panel, #accordion > div > section {
    width: 560px;
    position: absolute;
    top: -23px;
    right: 0;
}
    #accordion > div > div.ui-tabs-panel span.button, #accordion > div > section span.button { float: right; display: inline-block; }
    #accordion > div > div.ui-tabs-panel h4, #accordion > div > section h4 { margin-bottom: 7px; font-size: 1.5em; color: #6a6a6a; }
    #accordion > div > div.ui-tabs-panel h5, #accordion > div > section h5 { margin-bottom: 15px; font-size: .9em; color: #a6a6a6; }
    #accordion > div > div.ui-tabs-panel p, #accordion > div > section p {
        font: 1em Helvetica, Arial, "Lucida Grande", sans-serif;
        color: #757575;
        line-height: 1.5em;
    }

そしてHTML：

<div id="main-content">
    <h1>Welcome, Leader!</h1>
    <hr />
    <h2>SECTIONS</h2>
    <div id="accordion">
        <h3>Coaching and Mentoring</h3>
        <div id="sec-1">
            <ul>
                <li><a href="sections/lead-with-style/1-1">Under Construction</a></li>
            </ul>
        </div>
        <h3>Lead With Style</h3>
        <div id="sec-2">
            <ul>
                <li><a href="sections/lead-with-style/2-1">Calls 1-6</a></li>
            </ul>
        </div>
        <h3>Moving Up</h3>
        <div id="sec-3">
            <ul>
                <li><a href="sections/lead-with-style/3-1">Compensation Plan Videos</a></li>
            </ul>
        </div>
        <h3>Dan Clark Leadership</h3>
        <div id="sec-4">
            <ul>
                <li><a href="sections/lead-with-style/4-1">Tab 1</a></li>
            </ul>
        </div>
        <h3>New Rep Coaching</h3>
        <div id="sec-5">
            <ul>
                <li><a href="sections/lead-with-style/5-1">Advisor Checklist</a></li>
                <li><a href="sections/lead-with-style/5-2">Six Weekly Emails</a></li>
            </ul>
        </div>
        <h3>Monthly Meetings</h3>
        <div id="sec-6">
            <ul>
                <li><a href="sections/lead-with-style/6-1">How to Hold an Effective Meeting</a></li>
                <li><a href="sections/lead-with-style/6-2">Monthly Basic Meeting Agenda</a></li>
                <li><a href="sections/lead-with-style/6-3">Monthly Agenda Details</a></li>
                <li><a href="sections/lead-with-style/6-4">More Info</a></li>
            </ul>
        </div>
        <h3>Communication Skills</h3>
        <div id="sec-7">
            <ul>
                <li><a href="sections/lead-with-style/7-1">Under Development</a></li>
            </ul>
        </div>
    </div>
</div>
4

1 に答える 1

0

絶対位置は確かにあなたのパーティーを台無しにしているので、いくつかの CSS と jQuery でそれを修正しましょう:

.ui-tabs-panel {
  overflow: auto;
}

これにより、コンテンツが「長すぎる」場合にスクロール バーが表示されます。何が長すぎるのですか？ここで jQuery を使用します。

$('.ui-tabs-panel').css("height", $('#accordion').innerHeight()+"px");

タブのコンテンツがアコーディオンと同じ高さになるように強制します。これで、「多すぎる」という指標が得られ、正しく表示されます (もちろん、スクロールバーは美的に満足できるものではないかもしれませんが)。

厳密でないサイズのコンテナーでこの動作を維持するには、ブラウザーのサイズが変更されるたびに高さを再バインドする必要があることに注意してください。これには、さらに jQuery が必要になります。上記のコードをラップしましょう:

function makeAccordionContentFit() {
  $('.ui-tabs-panel').css("height", $('#accordion').innerHeight()+"px");
}

// make it work right now!
makeAccordionContentFit();

// also make it work on document resize...
$(document).resize(makeAccordionContentFit);

あなたのページには固定サイズのコンテナーがあるように見えますが、将来に向けて常に適切な計画です。

于 2013-02-05T23:03:35.023 に答える