Question

如果问题令人困惑，我道歉，我不太确定如何说出来。

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

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

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

编辑我注意到＆＃34; +＆＃34;标志显示在图片的上方创建您自己的筹款页面＆＃34;，这是折叠时出现下一个标题的位置，但加号是绝对的跨度，所以它应该向下移动也不应该在＆＃39;是吗？

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内部有浮动图像，但图像后没有浮动清除机制。反过来，li的计算高度不包括图像的高度，因此+符号显示在图像上方，就在它应该根据CSS的位置。

此外，由于同样的问题，图像位于下一个li的空间中，导致它为下一个内容而不是当前内容的事件注册click事件。要解决此问题，请在CSS中添加一个简单的clearfix规则

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

这将在切换视图li内的每个ul内容之后创建一个虚构的块，用于清除li

内的任何浮动项目

Answer 2

＆＃13;

$('#toggle-view li').click(function() {

  var text = $(this).children('div.panel');

  if (text.is(':hidden')) {
    text.slideDown('200');
    $(this).children('span').append("<span> - </span>");
  } else {
    text.slideUp('200');
    $(this).children('span').append("<span> + </span>");
  }

});

＆＃13;

当使用jquery`slidedown（）`时，如何按下`<li> <span>`

2 个答案: