4

我有一个问题列表，单击时有一个隐藏的内容 div 切换进出。这很好用，但是由于我的 LI 是浮动的，所以当我打开其中一个 LI 时，它会将与其相邻的内容向下推。

单击时，内容打开（间隙）

    LI   |    LI
    LI   |    LI
    LI   |    LI
  content|   
  content|   
    LI   |    LI

我想要发生的事情（没有差距）

    LI   |    LI
    LI   |    LI
    LI   |    LI
  content|    LI
  content|
    LI   |

HTML

<ul class="main">
    <li>Some stuff
        <ul class="subMain"><li>content content content</li></ul>
    </li>
    <li>Some stuff
        <ul class="subMain"><li>content content content</li></ul>
    </li>
    <li>Some stuff
        <ul class="subMain"><li>content content content</li></ul>
    </li>
    <li>Some stuff
        <ul class="subMain"><li>content content content</li></ul>
    </li>
</ul>

CSS

.main { 
    list-style: none; 
    margin: 0; padding: 10px 0; 
    width: 500px; 
    border: 1px solid #000;
    overflow: hidden;
}
.main li { 
    width: 50%; height: auto;
    float: left; 
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;
}
.subMain { 
  margin: 0; padding: 0; display: none;  
}

jQuery

$('ul.main li').click(function () {
   $(this).find('.subMain').slideToggle(500); 
});

在这里摆弄 http://jsfiddle.net/S89Uv/2/

我必须将这些 LI 放入列中吗？

4

1 回答 1

1

我在您的 jsfiddle 中对此进行了一些尝试，并提出了一些 jQuery 代码，可将您现有的 HTML 拆分为 2 个列表，并且看起来它的行为符合您的要求。我相应地更新了 CSS。这是你要找的吗？

http://jsfiddle.net/S89Uv/7/

用于拆分列表的 jQuery 代码：

var everyOtherLi = $('ul.main li:odd');
var firstColumnList = $('ul.main');
var secondColumnList = $('<ul class="main"></ul>').insertAfter(firstColumnList);
secondColumnList.append(everyOtherLi);
于 2013-11-08T20:29:56.820 回答