Question

你好我非常新的jq / js我使用hide / show打开/关闭div他们工作正常，直到我尝试打开一个已经打开的div - 他们最终重叠。

有没有办法将它设置为在打开新的div之前关闭任何打开的div，或者如果div首先打开则可能只使用hide？

我正在使用的jQuery是：

<script>
$(document).ready(function() {

    $('.content').hide();

    $("#show-services").click(function () {
          $(".content#services").show("slide", { direction: "right" }, 1000);
    });    


    $("#show-about").click(function () {
          $(".content#about").show("slide", { direction: "right" }, 1000);
    });  


    $("#show-contact").click(function () {
          $(".content#contact").show("slide", { direction: "right" }, 1000);
    });     

    $("#hide-services").click(function () {
          $(".content#services").hide("slide", { direction: "right" }, 1000);
    });

    $("#hide-about").click(function () {
          $(".content#about").hide("slide", { direction: "right" }, 1000);
    });

    $("#hide-contact").click(function () {
          $(".content#contact").hide("slide", { direction: "right" }, 1000);
    });

});
</script>

如需查看其所在的网站www.pudle.co.uk/int - 如果您单击左上角的链接，然后点击其他链接，则可以看到冲突。

Answer 1

在使用show()之前，请在您要隐藏的内容上使用hide()：

$("#div1, #div2, #divX").hide(); // hide all these divs
$("#thisDiv").show(); // now show this one

请注意，您可以将多个选择器与逗号$("#div1, #div2, #divX")

结合使用

Answer 2

切换可以提供帮助：http://api.jquery.com/toggle/

或之类这个：

$('a').click(function () {
    $(".content").hide("slide", { direction: "right" }, 1000); //hide them all
    $(".content#"+this.id).show("slide", { direction: "right" }, 1000);//show one
});

Answer 3

由于您的所有内容div都有一个＆＃39;内容＆＃39;，只需在显示当前内容之前隐藏所有内容类别的div。

$("#show-services").click(function () {
    $('.content').hide('slide', {direction: 'right'}, 1000);
    $(".content#services").show("slide", { direction: "right" }, 1000);
});

Answer 4

我相信你会发现：visible选择器对此非常有用。实施例

$("#show-services").click(function (e) {
e.preventDefault(); // this is for the URL to not change.
      $(".content:visible .hide a").click(); // you get the visible first div in .content and make a click on the HIDE link
      $(".content#services").show("slide", { direction: "right" }, 1000);

});

http://visualjquery.com/可以在选择器中找到一个简单易用的Jquery引用：D

Answer 5

您不必编写如此多的点击处理程序。在锚中指定相应的div，例如：href =“＃services”

$("#links a").click(function(e){
   e.preventDefault();
   whichdiv = $(this).attr("href");
   $('.content').hide('slide', {direction: 'right'}, 1000);
   $(whichdiv).show("slide", { direction: "right" }, 1000);
})

显示新的时关闭open div

5 个答案: