仅折叠/展开我选择的 div 而不是全部?

发布于 2024-10-03 12:19:33 字数 1866 浏览 2 评论 0原文

大家好,

我是一个刚刚开始使用 jQuery 的新手。我正在为我们的团队构建一个基本的 PHP 应用程序,该应用程序显示开放的帮助台票证列表。

为了避免屏幕混乱,我只想显示票证的标题及其描述(如果单击)。

这是我的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Animate my Div</title>
        <style type="text/css" media="screen">
            a {                    text-decoration: none;                }
            #expand {                    background-color: #fff;                }
            #mydiv {                    display: none;                }
        </style>
        <script src="jquery-1.3.2.js" type="text/javascript"></script>
        <script type="text/javascript">  $(document).ready(function(){
  $("a").click(function(){   $("div").slideToggle(1000);                });
            });            </script>
    </head>
    <body>
        <?php
        $con = mysql_connect("korg", "joe", "bob");
        if (!$con) {                die('Could not connect: ' . mysql_error());   }
        mysql_select_db("wfr11", $con);
        $result = mysql_query(" select title, description from webcases");
        while ($row = mysql_fetch_array($result)) {
        ?>
            <p><a href="#expand"><?php echo $row['title']; ?></a></p>
            <div id="mydiv"><?php echo $row['description']; ?></div>
        <?php
        }            mysql_close($con);            ?>
    </body>
</html>

现在,我的代码可以工作,但会展开所有打开的票证的所有 div,无论我单击什么票证名称。

理想情况下,我想显示我单击的票证名称的描述。不是全部。是否可以?

感谢您的帮助。

Greetings,

I am a newbie who just started with jQuery. I am building a basic PHP app for our team that displays a list of open helpdesk tickets.

To avoid cluttering the screen, I only want to display the title of the ticket and if clicked, its description.

Here's my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Animate my Div</title>
        <style type="text/css" media="screen">
            a {                    text-decoration: none;                }
            #expand {                    background-color: #fff;                }
            #mydiv {                    display: none;                }
        </style>
        <script src="jquery-1.3.2.js" type="text/javascript"></script>
        <script type="text/javascript">  $(document).ready(function(){
  $("a").click(function(){   $("div").slideToggle(1000);                });
            });            </script>
    </head>
    <body>
        <?php
        $con = mysql_connect("korg", "joe", "bob");
        if (!$con) {                die('Could not connect: ' . mysql_error());   }
        mysql_select_db("wfr11", $con);
        $result = mysql_query(" select title, description from webcases");
        while ($row = mysql_fetch_array($result)) {
        ?>
            <p><a href="#expand"><?php echo $row['title']; ?></a></p>
            <div id="mydiv"><?php echo $row['description']; ?></div>
        <?php
        }            mysql_close($con);            ?>
    </body>
</html>

Right now, my code works but unfolds all the divs for all open tickets, regardless of what ticket name I clicked.

Ideally, I'd like to show the description of for the ticket name I clicked. Not all of them. Is it possible?

Thanks for your help.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

拿命拼未来 2024-10-10 12:19:33

完全有可能,是的。

您遇到的第一个问题是您在循环中重复 ID,HTML ID 必须是唯一的。我建议在那里上课。将两个组件包装在一个 DIV 中,使它们成为一个也可以单独处理的组合项。

<?php
while ($row = mysql_fetch_array($result)) {
?>
<div class="entry">
    <p><a href="#expand"><?php echo $row['title']; ?></a></p>
    <div class="description"><?php echo $row['description']; ?></div>
</div>
<?php
}
?>

然后,您需要使 jQuery 仅选择相邻的描述 DIV。

$(document).ready(function(){
  $(".entry a").click(function() {
    $(this).parents('.entry').find('.description').slideToggle(1000);
  });
});

如果数据库中的回显尚未采用正确的 HTML 格式,请记住对它们使用 htmlentities()

Entirely possible, yes.

First issue you have is that you are repeating an ID in the loop, HTML IDs must be unique. I would suggest using a class there. Wrap the two components together in a DIV to make them in to a combined item that can be dealt with individually as well

<?php
while ($row = mysql_fetch_array($result)) {
?>
<div class="entry">
    <p><a href="#expand"><?php echo $row['title']; ?></a></p>
    <div class="description"><?php echo $row['description']; ?></div>
</div>
<?php
}
?>

Then, you need to make your jQuery select just the adjacent description DIV.

$(document).ready(function(){
  $(".entry a").click(function() {
    $(this).parents('.entry').find('.description').slideToggle(1000);
  });
});

Remember to use htmlentities() on your echo's from the database if they are not already in proper HTML form.

拿命拼未来 2024-10-10 12:19:33

是的,你正在寻找切换。也许使用 id 来选择您想要的 div 而不仅仅是普通的 div。

$(".link_class").click(function(){   $("#my_div").slideToggle(1000);                });

通过为链接分配一个类来定位特定的 div。

Yep, you're after a toggle. Maybe use an id to select the divs you want rather than just the plain div.

$(".link_class").click(function(){   $("#my_div").slideToggle(1000);                });

Target particular divs by assigning a class to the link.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文