Jquery单击事件问题（使用切换）

基本上，我有三个部门（按钮），叫做“主要的小型出租车服务”、“主要的快递服务”和“主要的搬家服务”。单击这些按钮，它们将显示相应的页面并隐藏以下分区：#img online booking、#main online booking和#main online booking徽标

当你第二次点击按钮时，它会再次显示#主要在线预订部门。虽然这在一定程度上是有效的，但当您（例如）单击minicab服务按钮，然后单击courier按钮时，它不起作用

为了让您了解我正在努力实现的目标，我将向您展示一幅图像：

基本上，我想做的是，如果你点击

minicab service

按钮，它会显示

#main minicab service

div。如果你再次点击

minicab service

按钮，它会显示三个在线预订div。这部分工作正常，但是，如果我先单击

小型出租车服务

按钮，然后单击

快递服务

按钮，它会显示

#主要快递服务

选项卡，同样应该显示。但是如果我单击

微型出租车服务

按钮，它会显示在线预订选项卡，我希望它显示#主微型出租车服务`div

我认为唯一需要修复的部分是，我希望它仅在同一按钮被点击两次时显示在线预订div，否则显示被点击的div

我希望这是有意义的，以下是我目前拥有的jquery：

    /*  Click Events for Buttons */

        /* Courier */

      $("#img-courier").toggle(
        function(){ 

        $('#main-removal-service').hide();
        $('#main-minicab-service').hide();
        $('#img-onlinebooking').fadeOut('slow');
        $('#main-online-booking').fadeOut('slow');
        $('#main-onlinebooking-logo').fadeOut('slow');
        $('#main-courier-service').delay(600).fadeIn('slow');},

        function(){
        $('#main-removal-service').hide();
        $('#main-minicab-service').hide();
        $('#img-onlinebooking').show();
        $('#main-online-booking').show();
        $('#main-onlinebooking-logo').show();
        $('#main-courier-service').hide();
      });

       /* Minicab */

      $("#img-minicab").toggle(
        function(){ 

        $('#main-removal-service').hide();
        $('#main-courier-service').hide();
        $('#img-onlinebooking').fadeOut('slow');
        $('#main-online-booking').fadeOut('slow');
        $('#main-onlinebooking-logo').fadeOut('slow');
        $('#main-minicab-service').delay(600).fadeIn('slow');},

        function(){
        $('#main-removal-service').hide();
        $('#main-courier-service').hide();
        $('#img-onlinebooking').show();
        $('#main-online-booking').show();
        $('#main-onlinebooking-logo').show();
        $('#main-minicab-service').hide();

      });

      /* Removal */

      $("#img-removal").toggle(
        function(){ 

        $('#main-minicab-service').hide();
        $('#main-courier-service').hide();
        $('#img-onlinebooking').fadeOut('slow');
        $('#main-online-booking').fadeOut('slow');
        $('#main-onlinebooking-logo').fadeOut('slow');
        $('#main-removal-service').delay(600).fadeIn('slow');},

        function(){
        $('#main-minicab-service').hide();
        $('#main-courier-service').hide();
        $('#img-onlinebooking').show();
        $('#main-online-booking').show();
        $('#main-onlinebooking-logo').show();
        $('#main-removal-service').hide();

      });

---

您的代码耦合太紧密。在代码中，每个元素都必须知道其他元素。您已经看到只有3个元素的大问题。如果你有50个元素而不是3个元素，你会有一场真正的灾难。您必须重新编写代码，使其更加模块化。把这看作是一个起点：

    var allCourierElements = $(".myCourierElement");
    var allCabElements = $(".myCabElement");
    var allWhateverElements = $(".myWhateverElement");
    var allElements = $(".myElement");

    //so in your html, a valid cab element to be hidden or shown
    // would be, for instance:
    //<div class= "myElement myCabElement"></div>

    function func1(event)
    {

       allElements.hide();
       allCourierElements.show();

    }

    function func2(event)
    {

       allElements.hide();
       allCabElements.show();

    }

    function func3(event)
    {

       allElements.hide();
       allWhateverElements.show();

    }

    $("#img-courier").on('click', func1);
    $("#img-minicab").on('click', func2);
    $("#img-whatever").on('click', func3);
    //and so on

var allCourierElements=$（“.mycourierelements”）；
var allCabElements=$（“.myCabElement”）；
var allwhateverelement=$（“.myWhateverElement”）；
var等位基因=$（“.myElement”）；
//因此，在html中，需要隐藏或显示一个有效的cab元素
//例如：
//
函数func1（事件）
{
等位基因。隐藏（）；
AllCourieRelations.show（）；
}
函数func2（事件）
{
等位基因。隐藏（）；
allCabElements.show（）；
}
功能3（事件）
{
等位基因。隐藏（）；
allWhateverElements.show（）；
}
美元（“#img快递”）。在（'点击'，功能1）；
$（“#img minicab”）。在（'点击'，功能2）；
美元（“#img which”）。在（'click'，func3）上；
//等等

代码耦合太紧密。每个元素都必须了解其他元素。如果你有50个元素而不是3个元素，你会有一场灾难。您必须重新编写代码，使其更加模块化。看到我的解决方案只是一个起点。当然，您甚至可以将其设置为只有一个函数，而不是每个元素都有一个函数，并使用事件对象的自定义属性仅使用一个函数，同时仍然隐藏每个不需要的元素/显示您想要的元素。如果你真的需要它，我会让你来决定，如果你真的需要它，在这里评论一下，我可以举个例子，但是这应该足够满足你的目的了。谢谢你，这会更好。但是，我如何在第二次单击时显示

在线预订div

？您的意思是，如果连续两次单击3个按钮中的一个，则它不会显示快递、cab或删除，而是显示在线预订？我理解正确吗？然后，如果单击其中一个按钮，并且只单击一次，它就会恢复正常？这是正确的，尽管现在考虑一下，这样做没有多大意义，因为这样做对用户不太友好。我想我会坚持你使用的代码，如果显示courier、Removing或minicab页面，我会创建一个侧按钮切换回在线预订页面。