javascript - 使用 jQuery 使我的 div 扩展为新信息，但它与页面上的其他信息重叠

Question

我已经使用 J Query 使我的 div 扩展为新信息，但它与页面上的其他信息重叠，有人可以帮助解决这个问题吗？ 在我完成其余部分之前，我只编写了第一个 div 代码以使其正常工作。

这是我的代码的 fiddle : http://jsfiddle.net/G59nH/

HTML:

<div class="contentBox2">
    <div class="servicesBox">
        <p>
            <b><u>Personal Breakthrough Sessions</u></b>
            <br>
            <i>“The secret of change is to focus all of your Energy, not on fighting the old, but on building the new.”</i>
            <br>
            <b>
                Socrates  &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;    

                <a id="clickme" href="#"><u>Read more</u></a><br />
                <div id="PBScontent" class="commenthidden">
                    You know when you are ready to breakthrough what has been holding you back to be and do something more. A Breakthrough Session is one full day or 2 half days (within 2 days) where Louise supports you through identifying what has been limiting you and then by using the tools from Strategic Intervention, NLP, Time Line Therapy and Hypnosis training, helps you break down the barriers and create new options to start you on a journey to achieve what you want. Louise will work with you to devise a plan, and making you accountable by requesting that some immediate action is taken, as accountability is put in place. In addition will arrange follow – up sessions to determine how you are progressing, holding the client accountable for planned actions. A worthwhile investment to lasting change and success in all areas of your life.
                </div>
            </b> 
        </p>
    </div>

    <div class="servicesBox">
        <p>
            <b><u>Relationship and Family Coaching</u></b>
            <br>
            <i>“A real decision is measured by the fact that you've taken a new action. If there's no action, you've haven't truly decided"</i>
            <br>
            <b>
                Tony Robbins &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <u>Read more</u>
            </b>
        </p>    
    </div>

    <div class="servicesBox">
        <p>
            <b><u>Coaching Children through Separation</u></b>
            <br>
            <i>"Overcome that notion that you must be regular. It robs you of the chance to be extra-ordinary."</i>
            <br>
            <b>
                Uta Hagen &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<u>Read more</u>
            </b>
        </p>
    </div>

    <div class="servicesBox">
        <p>
            <b><u>Well being Coach and Massage</u></b>
            <br>
            <i>"Modern medicine, for all its advances, knows less that 10% of what your body knows instinctively."
            ”</i>
            <br>
            <b>
                Deepak Chopra&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <u>Read more</u>
            </b>
        </p>
    </div>

    <div class="servicesBox">
        <p>
            <b><u>What i do!</u></b>
            <br>
            <i>I am a professional in Strategic Interventionist and Coaching, Master NLP/ Time Line Therapy and Hypnosis Practitioner and Therapeutic Massage Practitioner.</i>
            <br>
            <b>
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <u>Read more</u>
            </b>
        </p>    
    </div>
</div>   
</div>

CSS:

#debug {
    position:absolute;
    top:350px;
}
.commenthidden {
    display:none
}
.commentshown {
    display:inline
}

JQuery:

$(document).ready(function () {
    $("#clickme").click(function () {
        $("#PBScontent").slideToggle("slow")
    });
});

Answer 1

尝试display:block，而不是display:inline。