Jquery幻灯片切换，2个按钮，2个面板，2个图像

我有一个我正在尝试创建的具有特定效果的站点。我正处于学习查询的早期阶段，所以我希望能得到一些指导/帮助/代码来实现我所需要的

我有两个按钮（图像）——#toggle1和toggle#2

每个按钮都有自己的隐藏/显示面板（简单div），称为#panel1和#panel2

我可以使用两个简单的单独滑动切换脚本来打开和关闭相关按钮的相关面板。但是，如何组合这些脚本，以便在任何时候只打开一个面板（从两个面板都未打开开始）

然后，我使用的按钮是图像，我如何才能让图像在单击时更改为不同的图像（如打开+图像和关闭x图像）

---

我已经做了大量的研究，可以找到单独实现所有这些目标的方法，但需要知道将这些目标整合在一起的最佳实践…

你问了很多问题，我想一个问题一个问题

您可以将相同的函数分配给div并包含一个变量，然后执行脚本

    <button id="toggle1" onClick="open('1');"></button>
    <div id="panel1" style="display:none;">Content</div>

    <button id="toggle2" onClick="open('2');"></button>
    <div id="panel2" style="display:none;">Content</div>

    <script>
        function open(num){
            jQuery("#panel"+num).slideToggle();
        }
    </script>

内容
内容
函数打开（num）{
jQuery（“#panel”+num）.slideToggle（）；
}

这样，您就可以对两个div使用相同的函数。

1）保留一个全局变量，用于确定当前打开的面板

var leftPanelOpen = false;

2） 按下按钮时，确定相应的操作

$("#leftPanelButton").click(function() {
    if(!leftPanelOpen) {
        //Left panel was not open previously. close right panel and open left
        $("#rightPanel").slideUp(500, function() {
            $("#leftPanel").slideDown(500);
        });
    }

    leftPanelOpen = true;
});

$("#rightPanelButton").click(function() {
    if(leftPanelOpen) {
        //Left panel open previously. close left and open right
        $("#leftPanel").slideUp(500, function() {
            $("#rightPanel").slideDown(500);
        });
    }

    leftPanelOpen = false;
});

3） 在单击事件中，相应地更改图像。这取决于你真正想做什么。如果在单击事件中，您希望更改按钮图像本身，请执行此操作

$(this).attr("background-image", "url('...');");

正如其他海报所建议的，您可以对一个函数进行两次单击调用，但在刚开始时，我不会真的费心

---

要正确执行此操作，需要首先将右侧面板初始化为打开状态。如果您希望左面板最初打开，请将全局设置初始化为true。

您忘记向我们显示您的HTML以及您可能进行的任何尝试。请在您的问题中添加相关的（）代码。对不起，我觉得它与本例无关，因为它只有两个图像和两个div。如前所述，我可以做一个简单的幻灯片切换，但我知道这不是正确的方式，所以我觉得这对任何人来说都是毫无价值的。不过，谢谢你的评论，我已经接受了。除了你完全没有抓住要点，没有将你的代码添加到一个关于DOM操作/行为的问题中。David，我解释说我是非常新的，并且假设这个示例很容易理解，如果我冒犯了你，那么这不是我的本意。如果你看看下面的@Null评论，他们不仅抓住了我的问题，还抓住了我有限的能力。他们已经调整了他们的学习风格来帮助我，并且实际上对我如何学习jquery并让它为我工作产生了影响。如果我为2张图片和2个div发布我的标记，你也会帮助我吗？我的意图不是让你难堪或困扰你，而是让人们更容易想象发生了什么。如果你向我们描述你的代码，最简单的方法就是向我们展示（精简的，最小的）代码，因为它不那么模棱两可，也不太容易产生误解。它还可以帮助我们指出您在HTML（初学者？）知识方面可能犯的任何错误，这将进一步促进您的学习。我们要求编写代码，因为这是我们的工作内容，是我们如何工作的，也是我们如何更好地进行教学的。阅读这篇文章非常有意义。今晚晚些时候我会试试这个。我还不熟悉“如果”，但似乎很直截了当。让按钮图像更改如何？您是否可以在$（“#leftPanelButton”）中使用单独的脚本（web上有大量示例）并运行该脚本。单击调用$（this）.attr（“背景图像”），“url（）”；如果您不熟悉If，请不要采取错误的方式，您可能需要后退几步，学习一些基本的javascript。了解算术运算、块、条件语句等对任何编程都是非常重要的。完全同意后退注释！没有冒犯！我只是想知道将所有这些结合起来的最佳方式，所以我没有学习那些无法实现最终目标的东西。我真的很感谢你的帮助和你解释一切的方式。我稍后会试一试，然后把它设为正确答案。再次感谢！