HTML

Question

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

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

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

这是结构：

HTML：

div

我的jQuery代码：

<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>

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

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

Answer 1

代码中的各种问题：

您的Javascript甚至不均衡，并在执行时抛出错误。
$('li a')匹配所有此类元素。也就是说，当您点击链接
你的设计也有点缺陷 - 如果我理解正确的话。您希望在单击链接时隐藏所有内容，包括链接本身。显然，如果链接本身被隐藏，你不会再显示链接......
您没有使用next()权利，无论如何都只能获得下一个元素。
您想在点击时显示.layout，但它已经显示了？我敢打赌你忘记了display: none .layout元素。

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

CSS

.layout {
    display: none;
}

的Javascript

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

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

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

<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();
    }
});

在slideToggle之后显示列表

2 个答案:

HTML

JQUERY