Javascript Jquery.next()帮助
我使用下面的代码在一组搜索结果上隐藏和显示一个框。每个结果都有自己的切换和框来显示和隐藏。我的问题是,单击任何一个切换都会显示和隐藏页面上的所有框,而不仅仅是一个结果的框。我该怎么做 谢谢Javascript Jquery.next()帮助,javascript,jquery,Javascript,Jquery,我使用下面的代码在一组搜索结果上隐藏和显示一个框。每个结果都有自己的切换和框来显示和隐藏。我的问题是,单击任何一个切换都会显示和隐藏页面上的所有框,而不仅仅是一个结果的框。我该怎么做 谢谢 jQuery(document).ready(function ($) { $("div.MoreResultsTrigger").click(function (e) { $("div.MoreResultsTrigger").next().slideToggle('fas
jQuery(document).ready(function ($) {
$("div.MoreResultsTrigger").click(function (e)
{
$("div.MoreResultsTrigger").next().slideToggle('fast');
});
});
使用悬停更新代码
$('a.MoreResultsTrigger').hover(
function () {
$(this).next().show();
},
function () {
$(this).next().hide();
}
);
使用
this
关键字,因为您只想隐藏正在单击的元素旁边的元素
jQuery(document).ready(function ($) {
$("div.MoreResultsTrigger").click(function (e)
{
$(this).next().slideToggle('fast');
});
});
未经测试,但请尝试:
$("div.MoreResultsTrigger").click(function (e)
{
$(this).next().slideToggle('fast');
});
使用$(this.next().slideToggle('fast')代码>将仅将其应用于您选择的代码。目前,它正在将slideToggle应用于所有div.MoreResultsTrigger。尝试以下操作:
jQuery(document).ready(function ($) {
$("div.MoreResultsTrigger").click(function()
{
$(this).next('.toggleable').slideToggle('fast');
});
});
将“.toggleable”类添加到.next()中只是为了防止在这两者之间有其他不想切换的内容。当然,您必须将.toggleable类添加到您感兴趣的所有元素中。当然,您可以用一个更有意义的名称替换toggleable,并且应该将其替换为。Have and addition question。我已经将代码更改为使用Hover,如果用户在框出现时将其自身悬停,则还需要保持显示框。检查更新代码的原始问题。如果用户悬停触发器,它将显示下一个div,即我的框。但是如果用户将鼠标悬停在该框上,它将保持显示状态,而不是消失,因为用户已删除了触发器上的悬停。