这里有一个foreach循环。对于它打印的每一项,都有一个可扩展/可折叠的评论部分。
我遇到的问题是,当我点击一个项目的"全部展开"时,它会同时展开循环中每个项目的注释。然而,我只想看到对该特定项目的评论。
我知道这与ID和类有关,但我对JQuery没有任何经验。所以请帮忙!
<?php
foreach ($items as $item) {
echo item['comment'];
echo $item['full_name']; ?>
<div id="listContainer">
<div class="listControl">
<a class="expandList">Expand All</a>
<a class="collapseList">Collapse All</a>
</div>
<ul class="expList">
<li>Item A
<ul>
<li>Item A.1
<ul>
<li><span>fidjis</span></li>
</ul>
</li>
<li>Item A.2</li>
<li>Item A.3
<ul>
<li><span>iejowejfiojwiefj.</span></li>
</ul>
</li>
</ul>
</li>
<li>Item B</li>
<li>Item C
<ul>
<li>Item C.1</li>
<li>Item C.2
<ul>
<li><span>sdfkjksdjfnjkdsfnjn</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<?php
}
?>
这是Jquery:
function prepareList() {
$('.expList').find('li:has(ul)')
.click( function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
//Create the button functionality
$('.expandList')
.unbind('click')
.click( function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
})
$('.collapseList')
.unbind('click')
.click( function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
})
};
您在循环的每次迭代中都创建ID为"listContainer"的div,这是无效的。ID只能使用一次。建议将Id="listContainer"更改为class="listContainer"
对于jQuery,问题在于您引用的是具有"collapsed"类的所有元素,而不仅仅是与"全部展开"按钮相关的容器中的元素。
我还没有测试过,但你会想要一些类似的东西
//Create the button functionality
$('.expandList')
.unbind('click')
.click( function() {
$(this).parents('.listContainer').find('.collapsed').addClass('expanded');
$(this).parents('.listContainer').find('.collapsed').children().show('medium');
})
$('.collapseList')
.unbind('click')
.click( function() {
$(this).parents('.listContainer').find('.collapsed').removeClass('expanded');
$(this).parents('.listContainer').find('.collapsed').children().hide('medium');
})
这里的区别在于,您从单击的按钮开始,并使用"listContainer"类进行div,然后从那里向下查找所有的".folded"元素。
首先应该将listContainer更改为class属性。
因为ID必须是唯一的。
function prepareList() {
$('.expList').find('li:has(ul)')
.click( function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
//Create the button functionality
$('.expandList')
.unbind('click')
.click( function() {
// walk up the tree from the clicked button
// and find the parent .listContainer
var $list = $(this).parents(".listContainer");
// find .collapsed in .listContainer
$list.find('.collapsed').addClass('expanded');
$list.find('.collapsed').children().show('medium');
});
$('.collapseList')
.unbind('click')
.click( function() {
// walk up the tree from the clicked button
// and find the parent .listContainer
var $list = $(this).parents(".listContainer");
// find .collapsed in .listContainer
$list.find('.collapsed').removeClass('expanded');
$list.find('.collapsed').children().hide('medium');
});
};
我认为您正在使用类来代替ID。ID用于标识单个元素,而一个类可以应用于不止一个元素。访问单个元素时,请尝试在jQuery调用中使用ID。你可以试试这样的东西:
?>
<div id="listContainer">
<div class="listControl">
<a class="expandList">Expand All</a>
<a class="collapseList">Collapse All</a>
</div>
<ul id="list1" class="expList">
<li>
Item A
<ul>
<li>
Item A.1
<ul>
<li>
<span>fidjisjfisdjfisdjifjsidfj.</span>
</li>
</ul>
</li>
<li>
Item A.2
</li>
<li>
Item A.3
<ul>
<li>
<span>iejowejfiojwiefj.</span>
</li>
</ul>
</li>
</ul>
</li>
<li>
Item B
</li>
<li>
Item C
<ul>
<li>
Item C.1
</li>
<li>
Item C.2
<ul>
<li>
<span> sdfkjksdjfnjkdsfnjn. </span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<?php
}
?>
你的jQuery会有点像
function prepareList() {
$('#list1').find('li:has(ul)')
.click( function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
//Create the button functionality
$('.expandList')
.unbind('click')
.click( function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
})
$('.collapseList')
.unbind('click')
.click( function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
})
};