jquery - 使用jquery ``时如何下推 `.slidedown()`

Question

如果问题令人困惑，我深表歉意，我不太确定如何措辞。

基本上，我有一个 jquery 代码，它的作用是在嵌套在 li 中的 div 中显示内容。当我单击标题时，内容会下降，它会在视觉上将下一个标题向下推，但如果您单击已显示内容的任意位置，它不会向上滑动，而是会显示下一个内容。

Test Page <~~ 在此测试页面中，您可以看到示例，只需单击带有 + 的标题即可，直到您想要关闭它为止。

我不确定是什么导致了这个问题。

编辑 我注意到“+”号出现在“创建您自己的筹款页面”部分的图片正上方”，这是折叠时下一个标题出现的位置, 但加号在绝对范围内，所以它也应该向下移动，不是吗？

HTML:
    <ul id="toggle-view">
        <li>
            <h6>Choose a fundraising idea</h6>
            <span>+</span>
            <div class="panel">
                <p>here are countless ways to contribute! Shave your head, run a marathon, or give up your birthday - the choice is yours! We've listed some of our most popular fundraising ideas but feel free to run with your own idea by choosing the 'Other' stream.</p>

                <br>

                <img src="../images/content/pagebuilder/ChooseAStream_screenshot.png" alt="Choose a Stream screenshot" width="100%"/>

            </div>
        </li>
        <li>
            <h6>Create your own fundraising page</h6>
            <span>+</span>
            <div class="panel">
                <p>Click on 'Register' to set up a fundraising page. You can set one up on your own or create a page where friends or colleagues can join you. Let us know what kind of fundraiser you're holding and we'll provide you with all the tools to help you succeed.</p>

                <br>
                <img src="../images/content/pagebuilder/PersonalPage_screenshot.png" align="left" alt="Personal page screenshot" width="100%"/>

            </div>
        </li>
        <li>
            <h6>Access your Participant Centre</h6>
            <span>+</span>
            <div class="panel">
                <p>As a Canadian Cancer Society cancer fighter, you have access to an online Participant Centre where you&#8217;ll find customizable, interactive tools to get people excited about sharing in your fundraising success!</p>

                <img src="../images/content/pagebuilder/ParticipantCentre_screenshot.png" align="left" alt="Participant Centre screenshot" width="100%"/>

            </div>
        </li>
  </ul>

CSS:
/*Drop Down Content*/
#toggle-view {
    list-style:none;    
    font-family:arial;
    font-size:11px;
    margin:0;
    padding:0;
    width: 50%;
}

    #toggle-view li {
        margin:10px;
        border-bottom:1px solid #ccc;
        position:relative;
        cursor:pointer;
    }

    #toggle-view h6 {
        margin:0;
        font-size:14px;
    }

    #toggle-view span {
        position:absolute;
        right:5px; top:0;
        color:#3498db;
        font-size:13px;
    }

    #toggle-view .panel {
        margin:5px 0;
        display:none;
    }

jQuery:

   $(document).ready(function () {

        $('#toggle-view li').click(function () {

            var text = $(this).children('div.panel');

            if (text.is(':hidden')) {
                text.slideDown('200');
                $(this).children('span').html('-');     
            } else {
                text.slideUp('200');
                $(this).children('span').html('+');     
            }

        });

    });

有什么建议吗？感谢您的宝贵时间!

Answer 1

问题是您的 li 内部有一个 float 图像，但图像后没有 float 清除机制。反过来，li 的计算高度不包括图像的高度，因此 + 符号显示在图像上方，根据CSS。

另外由于同样的问题，图片在下一个li的空间，导致它注册了下一个内容的点击事件，而不是当前内容的事件。为了解决这个问题，向您的 CSS 添加一个简单的 clearfix 规则

#toggle-view li::after {
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

这将在您的切换 View ul 中的每个 li 内容之后创建一个假想 block ，它将清除 li< 中的所有 float 元素