JQuery 打开/关闭唯一的抽屉

Posted 2023-05-08

【中文标题】JQuery 打开/关闭唯一的抽屉

【英文标题】：JQuery Open/Close Unique Drawers

【发布时间】：2013-01-06 11:31:18

【问题描述】：

我正在努力完成对您来说可能很简单的任务。我想要它，所以每次用户单击左侧栏上的一个“患者”时，都会打开一个抽屉。该抽屉将加载到页面上的隐藏 div (display:none) 中。每个 div 的 id 将是患者的姓氏。显然，我包含的小提琴仅出于演示目的而显示所有相同的姓氏。

但问题是我不知道如何为每个患者打开一个独特的抽屉。我想我需要以某种方式在每个患者的 li 上设置一个开关？

另外，如果他们点击列表中的另一位患者，我希望关闭当前打开的抽屉，然后打开他们刚刚点击的抽屉。此外，如果单击关闭按钮，显然也会关闭抽屉。

我有一个抽屉可以处理这个：

 $(".patient").toggle(function()
            $(this)
                $('#drawer').slideDown("slow")

            , function()
                $(this)
                $('#drawer').slideUp("slow")    

            );

但显然这行不通... :(

在小提琴中，它现在正在打开一个标准的“抽屉”。但实际上我希望每个命名 div 的数据以相同的形式加载。不明白的请留言。

这是小提琴：

http://jsfiddle.net/3veht/1/

【问题讨论】：

你试过什么？为什么你需要为每个 div 设置一个唯一的 div，为什么不只是在用户点击名称时动态加载内容？

@JohnKoerner 我希望能够动态加载它！我已经尝试了我的小提琴。甚至不知道从哪里开始做这样的独特项目，这就是我问的原因。对不起

【参考方案1】：

在您的 html 中添加一个数据元素来指示 ID，在这种情况下假设为患者 ID：

<li class="patient green" data-patientId="1">Josh Doe<img src="img/next.png"><img class="imgfix" src="img/accept.png"></li>
<li class="patient red" data-patientId="2">John Adams<img src="img/next.png"><img class="imgfix" src="img/cancel.png"></li>

然后在您的 javascript 中，当您加载数据时，您可以使用该 ID 来生成页面请求。我还将切换开关更改为单击并向上滑动前一个，然后向下滑动新的。在小提琴示例中：

 $(".patient").click(function()
     var pat = $(this);
     if ($("#drawer").is(":visible"))
         $("#drawer").slideUp("fast", function () 

            $('#drawer').slideDown("slow")
            $("#drawer").load("/echo/js?js=" + pat.data("patientid"));       
         );
     else   
     
         $('#drawer').slideDown("slow")
         $("#drawer").load("/echo/js?js=" + pat.data("patientid"));
     
 );

更新小提琴：http://jsfiddle.net/3veht/6/

【讨论】：

@JohnKoemer 这太棒了！生成页面请求对我来说可能有点困难。这就是为什么我想使用预加载的隐藏 div。您可以添加生成页面请求吗？数据都是php驱动的

@JohnKoemer 同样，它似乎在小提琴中无法正常工作。单击第一个，然后单击第二个，然后单击第一个。我希望抽屉关闭，然后打开那个人刚刚点击的那个，而不是重新加载打开的抽屉。你介意修一下吗？

@greycode 对于 PHP，只需将 /echo/js 替换为返回 html 的 URL。所以你可以简单地做$("#drawer").load("details.php?id-=" $(this).data("patientid"));

@JohnKoemer gotcha，我刚刚注意到了。你有没有注意到开场效果不太好？我原来的小提琴也不能很好地工作。奇数

@greycode 查看我更新的代码/小提琴，了解如何正确处理滑动。

【参考方案2】：

检查这个小提琴是否更新......

代码改动

 var divud = $(this).text().split(' ')[1];
                $('#drawer').slideDown("slow");
                $('#'+divud).removeClass('hidden');
              $('#'+divud).slideDown("slow");

JSFIDDLE