Question

我有一个问题列表，点击一个隐藏的内容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放入列中？

Answer 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);

仅在点击时展开浮动LI而不是任何其他li

1 个答案: