这是场景,我有一个php脚本来显示数据库中的动态数据。 从查询中获取的记录数每天可能会有所不同,因此它是非常动态的。

<a href="#" id='link1' class="showhide">This is Div Content 1</a><br>
<div id='content1' class='more'>contents 1</div>

<a href="#" id='link2' class="showhide">This is Div Content 2</a><br>
<div id='content2' class='more'>contents 2</div>

<a href="#" id='link3' class="showhide">This is Div Content 3</a><br>
<div id='content3' class='more'>contents 3</div>


$("#link1").on('click', function(){
        $("#content1").slideToggle();
        return false;
    });



$("#link2").on('click', function(){
        $("#content2").slideToggle();
        return false;
    });


$("#link3").on('click', function(){
        $("#content3").slideToggle();
        return false;
    });

我现在就是这样做的,但这不是动态的。 如果记录数为4,则为showhide隐藏。 第四个链接将不起作用。

id:link1,link2,link3和content1,2,3是从php循环中萌发的,它将是唯一的。

JsFiddle显示样本

===============>>#1 票数:1

// jQuery 1.4.3+
$('body').delegate( '.showhide', 'click', function(e){
  $(this).next('.more').slideToggle();
  return false;
});


// jQuery 1.7+
$( 'body' ).on( 'click', '.showhide', function(e){
  $(this).next('.more').slideToggle();
  return false;
});

了解有关事件委托的信息

===============>>#2 票数:0 已采纳

可能有更清洁的方法来实现此目的,但是绑定函数中具有所需的所有信息。

$('a.showhide').on('click', function(){
    $('#content'+this.id.slice(-1)).slideToggle();
});

在这里,您可以访问http://jsfiddle.net/devm33/ysBR6/

===============>>#3 票数:0

您可以使用data-* attributes

HTML

<a href="#" class="showhide" data-toggle="slide" data-target="slide1">
    This is Div Content 3
</a>
<br>
<div class='more' data-more="slide1">contents 3</div>

JavaScript的

$('.showhide[data-toggle="slide"]').on('click', function()
{
    $('.more[data-more="' + $(this).data('target') + '"]').slideToggle();
    return false;
});

  ask by wilson382 translate from so

未解决问题?本站智能推荐:

3回复

使用jQuery单击时显示div

我想创建一个<div> (显示:无),然后当我单击按钮时, <div>应该显示出来。 但是我得到这个错误: Parse error: syntax error, unexpected '(', expecting T_VARIABLE or '$' 当我
1回复

使用jQuery单击标签时隐藏某个div

为什么当我将复选框放在标签内时,它似乎停止工作 这是我的html代码。 这是我的jQuery代码。
4回复

如何使用JQuery切换功能在单击时显示/隐藏DIV?

我试图在单击另一个DIV时显示DIV。 我是JQuery的新手,并且只想使用CSS,但是由于使用PHP遍历数据库以显示所有创建的DIV,因此我需要使用JQuery单独显示隐藏的DIV。 当点击 HTML:单击desk_box时,将station_info稍微偏向一侧,以便用户可以取消切
7回复

单击无法使用jQuery显示或隐藏文本的div

当我从数据库中获取数据并在前端显示时。一旦我单击更多信息文本,仅需要显示作业名称,它应该显示其余文本,然后再次单击更多信息,则该文本应该被隐藏。 现在,它仅在单击更多信息后才在加载时间页面时显示所有文本,它隐藏了文本并显示了该文本。 脚本代码: HTML:
2回复

单击时使用Jquery刷新div

可以说我有一个包含div和mysql数据的页面。 例如下面的代码: 如果在这种情况下,我只想刷新页面的某些部分<div id="example"> ,我该如何只用一个页面而不使用.load()或$.post做到这一点。 实际上有可能吗?
3回复

在ajax jquery中页面重新加载后单击链接时显示隐藏的div

在我的页面中,我有许多隐藏的div。 在页面加载时,div被隐藏。 在单击链接时,将显示特定的div。 我需要它,因为页面重新加载后div应该显示。 我的代码在这里: 该代码有效,但是页面没有刷新。 我需要页面重新加载,然后显示隐藏的div。
2回复

单击/切换时显示/隐藏Java DIV

我在页面上列出了很多用户,并且使用php函数传递用户ID并返回显示其在线状态,头像,统计信息等的div弹出窗口。问题是当前代码已设置为显示该图层onmouseover并隐藏onmouseout层。 我希望代码显示为onclick,然后第二次单击(在同一链接上切换或在页面上的其他任何地方单击)隐
3回复

动态jQuery在mouseout上隐藏div

我试图在使用PHP生成的动态表上生成工具提示样式的弹出菜单。 该表在表中返回10至20行。 当我单击第一列表中的项目时,我希望弹出子菜单以工具提示的样式显示。 我已经在设计样式以使其看起来像我想要的样子,但是现在我正在尝试使功能正常工作! 我设法拼凑了显示和隐藏div的代码,它对
7回复

Jquery显示/隐藏DIV并在显示时使其闪烁

我正在创建一个div默认隐藏,当我点击一个链接它显示(显示)一个警告div,这工作正常,但我希望div也闪烁 这就是我所拥有的 显示div的文本链接 现在我们点击上面的链接时显示隐藏的div 现在是JQuery脚本 当我点击链接显示div而不闪烁时,div开始
5回复

隐藏并显示div单击

我想在单击href时隐藏ID,以便显示相同的ID,其他ID将自动关闭 例如: 和脚本: