Question

我有一个特殊效果的网站，我试图创建。我在学习查询的最初阶段，所以会喜欢一些方向/帮助/代码来实现我的需求...

我有2个按钮（图像） - ＃toggle1和toggle＃2。

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

我可以使用2个简单的单独的slidetoggle脚本来打开相关按钮并关闭其相关面板。但是，如何组合这些脚本，以便一次只打开一个面板（从未打开开始）？

然后，我使用的按钮是图像，如何在点击图像时将图像更改为不同的图像（如+图像打开，x图像关闭）？

我做了很多研究，可以找到分别完成所有这些事情的方法，但需要知道最佳实践才能将它们整合在一起......

Answer 1

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。

Answer 2

你问了很多问题，我当时认为是一个问题。

您可以为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>

通过这种方式，您可以对两个div使用相同的功能。

Jquery slideToggle，2个按钮，2个面板，2个图像

2 个答案: