1

我是 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);

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

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

4

2 回答 2

0

代码中的各种问题：

  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在同一页面中有多个相同的元素。class如果这些ids 可以重复，则使用。也就是说，更换

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

至

<div class="date">date</div>
<div class="location">location</div>
于 2013-06-08T12:35:42.237 回答
0

看这里，像这样？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>

查询

$('.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();
    }
});
于 2013-06-08T12:54:17.080 回答