在 slideToggle 之后显示列表

Question

我是 jQuery 的新手，我的项目有问题。

我有 li 由 php 创建的元素，每个 li 元素我得到 div 布局显示一些数据。

我希望能够单击位于 li 的标题并能够显示 div 布局并隐藏其他所有内容，但是当我再次单击标题时，它会隐藏布局 div 并显示所有列表再次。

这是结构：

HTML：

<ul>
  <li>
    <div id="date">date</div>
    <a href="#" class="click">Title dynamically 1</a>
    <div id="location">location</div>
    <div class="layout">Data dynamically 1</div>
  </li>
  <li>
    <div id="date">date</div>
    <a href="#" class="click">Title dynamically 2</a>
    <div id="location">location</div>
    <div class="layout">Data dynamically 2</div>
  </li>
</ul>

我的 jQuery 代码：

  $('li a').click(function () {
          $('li a').next('.layout').slideToggle(600);
               $('li a').not(this).slideToggle(600);

使用此代码，它只隐藏标题，不显示布局

我尝试了很多组合但没有运气，有人可以帮助我吗？

Answer 1

代码中的各种问题：

1. 您的 Javascript 甚至不平衡，执行时会抛出错误。
2. $('li a') 匹配所有此类元素。也就是说，您将在单击链接时为所​​有内容切换幻灯片
3. 如果我理解正确的话，你的设计也有点缺陷。单击链接时，您想隐藏所有内容，包括链接本身。显然，如果链接本身被隐藏，您将不会再次显示该链接...
4. 您没有使用next() 对，无论如何它只会获取下一个元素。
5. 您想在点击时显示.layout，但它已经显示了？我敢打赌你忘了把display: none 放在.layout 元素上。

我相信这就是你想要的。 jsFiddle

CSS

.layout {
    display: none;
}

Javascript

$('li a').click(function () {
    $(this).siblings().not('a').slideToggle(600);
});

1. $(this) 表示点击的元素，转换为jQuery对象
2. siblings() 获取元素的所有兄弟元素
3. not() 从刚刚检索到的同级列表中删除 a 元素，以便不隐藏链接
4. 最后，实际调用slideToggle。 jQuery 足够聪明，可以隐藏所有显示的内容 (everything else) 并显示所有隐藏的内容 (.layout)。

另外，请不要在同一页面中有多个具有相同id 的元素。如果ids 可以复制，请使用class。也就是说，替换

<div id="date">date</div>
<div id="location">location</div>

到

<div class="date">date</div>
<div class="location">location</div>

Answer 2

检查这里，像这样？ http://jsfiddle.net/yeyene/eUzk8/

*对多个列表使用 css 类而不是 id。

HTML

<ul>
    <li>
        <div class="date">date</div>
        <a href="#" class="title">Title dynamically 1</a>
        <div class="location">location</div>
        <div class="layout">Data dynamically 1</div>
    </li>
    <li>
        <div class="date">date</div>
        <a href="#" class="title">Title dynamically 2</a>
        <div class="location">location</div>
        <div class="layout">Data dynamically 2</div>
    </li>
</ul>

JQUERY

$('.title').click(function () { 
    var current = $(this).parent('li').children('.layout').css('display');
    if(current == 'none'){
        $(this).parent('li').children('.layout').slideDown(600);
        $(this).parent('li').children('.date, .location').not(this).hide();
    }
    if(current == 'block'){
        $(this).parent('li').children('.layout').slideUp(600);
        $(this).parent('li').children('.date, .location').not(this).show();
    }
});